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之Ajax运用 学习运用篇
Sep 26 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
js实现右键弹出自定义菜单
Sep 08 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引用效率问题分析
2012/03/23 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
Javascript 二维数组
2009/11/26 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
python self,cls,decorator的理解
2009/07/13 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python实现人脸识别代码
2017/11/08 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python通过文本和图片生成词云图
2020/05/21 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
电焊工岗位职责
2014/03/06 职场文书
企业总经理任命书
2014/06/05 职场文书
教师求职自荐信范文
2015/03/04 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技