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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
基于Vue单文件组件详解
Sep 15 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
ext jquery 简单比较
2010/04/07 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
django-allauth入门学习和使用详解
2019/07/03 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
体育教师工作总结的自我评价
2013/10/10 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
绿色环保标语
2014/06/12 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2016春节慰问信范文
2015/03/25 职场文书
幼儿园开学通知
2015/04/24 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python