js使用cookie实现记住用户名功能示例


Posted in Javascript onJune 13, 2019

本文实例讲述了js使用cookie实现记住用户名功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3water.com cookie记住用户名</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
 <script>
 //1、cookie的使用:document.cookie = 'key=value';可以同时设置多个
 // document.cookie="username=longzhoufeng"
// document.cookie="age=03"
//2、cookie的过期时间:document.cookie = '名称=值;expires=' + 字符串格式的时间;
// var myDate=new Date()
// myDate.setDate(myDate.getDate()+3)
// document.cookie="mynameis="+encodeURI("longzhoufeng")+ ";expires="+myDate.toGMTString();
// document.cookie="age=30"
// console.log(decodeURI(document.cookie))
// 解码后输出结果如下:
//mynameis=longzhoufeng; age=30
//3、把上面的封装成一个函数,其中有三个参数是在变化的,key值,value值,T时间
function setCookie(key,value,t){
  var myDate=new Date()
  myDate.setDate(myDate.getDate()+t)
  document.cookie=key+"="+value+ ";expires="+myDate.toGMTString();
}
function getCookie(key){
  var arr1 = document.cookie.split('; ');
  for (var i=0; i<arr1.length; i++) {
    var arr2 = arr1[i].split('=');
    if ( arr2[0] == key ) {
      return decodeURI(arr2[1]);
    }
  }
}
function removeCookie(key) {
  setCookie(key, '', -1);
}
// setCookie("myName","longzhoufeng",1)
// console.log(getCookie("myName"))
// console.log(removeCookie("myName"))
// alert(typeof myDate)
// 必须将时间格式转换成字符形式
// alert(typeof myDate.toGMTString());
//4、内容最好编码存放,encodeURI
//alert( encodeURI('你好') );
//alert( decodeURI('%E4%BD%A0%E5%A5%BD') )
 </script>
 <script>
window.onload = function() {
  var oUsername = document.getElementById('username');
  var oLogin = document.getElementById('login');
  var oDel = document.getElementById('del');
  if ( getCookie('username') ) {
    oUsername.value = getCookie('username');
  }
  oLogin.onclick = function() {
    alert('登陆成功');
    setCookie('username', oUsername.value, 5);
  }
  oDel.onclick = function() {
    removeCookie('username');
    oUsername.value = '';
  }
}
 </script>
  <input type="text" id="username" />
    <input type="button" value="登陆" id="login" />
    <input type="button" value="删除" id="del" />
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 #Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 #Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 #Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 #Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 #Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
小程序组件之自定义顶部导航实例
Jun 12 #Javascript
You might like
php实现的一段简单概率相关代码
2016/05/30 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
vuex的使用步骤
2021/01/06 Vue.js
详解python的几种标准输出重定向方式
2016/08/15 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python创建学生成绩管理系统
2019/11/22 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
internal修饰符起什么作用
2013/12/16 面试题
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
《充气雨衣》教学反思
2014/04/07 职场文书
高中生操行评语大全
2014/04/25 职场文书
英文求职信范文
2014/05/23 职场文书
法院授权委托书格式
2014/09/28 职场文书
美容院合作经营协议书
2014/10/10 职场文书
会议欢迎词范文
2015/01/27 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
Golang 并发编程 SingleFlight模式
2022/04/26 Golang