JavaScript使用cookie实现记住账号密码功能


Posted in Javascript onApril 27, 2015

很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。

下面展示这个功能的代码,原作者已无法考究。。。。

测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js COOKIE 记住帐号或密码</title>
<script type="text/javascript">
  window.onload=function onLoginLoaded() {
    if (isPostBack == "False") {
      GetLastUser();
    }
  }
   
  function GetLastUser() {
    var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符
    var usr = GetCookie(id);
    if (usr != null) {
      document.getElementById('txtUserName').value = usr;
    } else {
      document.getElementById('txtUserName').value = "001";
    }
    GetPwdAndChk();
  }
  //点击登录时触发客户端事件
   
  function SetPwdAndChk() {
    //取用户名
    var usr = document.getElementById('txtUserName').value;
    alert(usr);
    //将最后一个用户信息写入到Cookie
    SetLastUser(usr);
    //如果记住密码选项被选中
    if (document.getElementById('chkRememberPwd').checked == true) {
      //取密码值
      var pwd = document.getElementById('txtPassword').value;
      alert(pwd);
      var expdate = new Date();
      expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
      //将用户名和密码写入到Cookie
      SetCookie(usr, pwd, expdate);
    } else {
      //如果没有选中记住密码,则立即过期
      ResetCookie();
    }
  }
   
  function SetLastUser(usr) {
    var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
    var expdate = new Date();
    //当前时间加上两周的时间
    expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
    SetCookie(id, usr, expdate);
  }
  //用户名失去焦点时调用该方法
   
  function GetPwdAndChk() {
    var usr = document.getElementById('txtUserName').value;
    var pwd = GetCookie(usr);
    if (pwd != null) {
      document.getElementById('chkRememberPwd').checked = true;
      document.getElementById('txtPassword').value = pwd;
    } else {
      document.getElementById('chkRememberPwd').checked = false;
      document.getElementById('txtPassword').value = "";
    }
  }
  //取Cookie的值
   
  function GetCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
      var j = i + alen;
      //alert(j);
      if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0) break;
    }
    return null;
  }
  var isPostBack = "<%= IsPostBack %>";
   
  function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
  }
  //写入到Cookie
   
  function SetCookie(name, value, expires) {
    var argv = SetCookie.arguments;
    //本例中length = 3
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
  }
   
  function ResetCookie() {
    var usr = document.getElementById('txtUserName').value;
    var expdate = new Date();
    SetCookie(usr, null, expdate);
  }
</script>
</head>
<body>
<form id="form1">
 <div> 用户名:
  <input type="text" ID="txtUserName" onblur="GetPwdAndChk()">
  <input type="password" ID="txtPassword">
  密码:
  <input type="checkbox" ID="chkRememberPwd" />
  记住密码
  <input type="button" OnClick="SetPwdAndChk()" value="进入"/>
 </div>
</form>
</body>
</html>
Javascript 相关文章推荐
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
微信小程序实现星级评价
Nov 20 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
使用console进行性能测试
Apr 27 #Javascript
浅谈javascript实现八大排序
Apr 27 #Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 #Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 #Javascript
javascript关于运动的各种问题经典总结
Apr 27 #Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 #Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 #Javascript
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
医院护理人员的自我评价分享
2013/10/04 职场文书
妇产科护士自我鉴定
2013/10/15 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android