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 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js中生成map对象的方法
Jan 09 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
纯js实现隔行变色效果
Nov 29 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
动手学习无线电
2021/03/10 无线电
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python打印输出数组中全部元素
2018/03/13 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Pycharm安装python库的方法
2020/11/24 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
专升本个人自我评价
2013/12/22 职场文书
工作会议欢迎词
2014/01/16 职场文书
房地产项目策划书
2014/02/05 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
硕士学位论文评语
2014/12/31 职场文书
医院科室评语
2015/01/04 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
mysql部分操作
2021/04/05 MySQL
logback 实现给变量指定默认值
2021/08/30 Java/Android