夏日博客

A-A+

js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)

2016年05月07日 前端设计 暂无评论 阅读 7 views 次

发现在做PHP站点运维时，少不了JS或者jquery,因为这两者用得太多了，几乎每个页面都要用到JS或者jquery效果，这样和PHP进行搭配，才能有更好的体验效果，虽然最近下了不少的JS教程，但还一直没有时间去看，这不，最近研究的一款JS读写COOKIES的功能，功能虽然实现了，但还是没有修改成我想要的效果，好了，暂且先进行收藏吧，等学习了JS再来修改好了。

js实现记住帐号或密码(js读写COOKIE) 的实现代码，原理就是利用cookies保存于读取功能，测试方法：加入先输入用户名xiariboke密码为 www.xiariboke.net，选择记住密码，然后关闭后，重新打开页面，在用户名里面输入xiariboke，则密码会自动输入密码,实例代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml" >   
  3. <head>   
  4. <title>js COOKIE 记住帐号或密码</title>   
  5. <script language="javascript" type="text/javascript">   
  6. function onLoginLoaded()   
  7. {   
  8. if(isPostBack == "False")   
  9. {   
  10. GetLastUser();   
  11. }   
  12. }   
  13. function GetLastUser()   
  14. {   
  15. var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";   
  16. var usr = GetCookie(id);   
  17. if(usr != null)   
  18. {   
  19. document.getElementById('txtUserName').value = usr;   
  20. }   
  21. else   
  22. {   
  23. document.getElementById('txtUserName').value = "001";   
  24. }   
  25. GetPwdAndChk();   
  26. }   
  27. //点击登录时触发客户端事件   
  28. function SetPwdAndChk()   
  29. {   
  30. //取用户名   
  31. var usr = document.getElementById('txtUserName').value;   
  32. alert(usr);   
  33. //将最后一个用户信息写入到Cookie   
  34. SetLastUser(usr);   
  35. //如果记住密码选项被选中   
  36. if(document.getElementById('chkRememberPwd').checked == true)   
  37. {   
  38. //取密码值   
  39. var pwd = document.getElementById('txtPassword').value;   
  40. alert(pwd);   
  41. var expdate = new Date();   
  42. expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));   
  43. //将用户名和密码写入到Cookie   
  44. SetCookie(usr,pwd, expdate);   
  45. }   
  46. else   
  47. {   
  48. //如果没有选中记住密码,则立即过期   
  49. ResetCookie();   
  50. }   
  51. }   
  52. function SetLastUser(usr)   
  53. {   
  54. var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";   
  55. var expdate = new Date();   
  56. //当前时间加上两周的时间   
  57. expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));   
  58. SetCookie(id, usr, expdate);   
  59. }   
  60. //用户名失去焦点时调用该方法   
  61. function GetPwdAndChk()   
  62. {   
  63. var usr = document.getElementById('txtUserName').value;   
  64. var pwd = GetCookie(usr);   
  65. if(pwd != null)   
  66. {   
  67. document.getElementById('chkRememberPwd').checked = true;   
  68. document.getElementById('txtPassword').value = pwd;   
  69. }   
  70. else   
  71. {   
  72. document.getElementById('chkRememberPwd').checked = false;   
  73. document.getElementById('txtPassword').value = "";   
  74. }   
  75. }   
  76. //取Cookie的值   
  77. function GetCookie (name)   
  78. {   
  79. var arg = name + "=";   
  80. var alen = arg.length;   
  81. var clen = document.cookie.length;   
  82. var i = 0;   
  83. while (i < clen)   
  84. {   
  85. var j = i + alen;   
  86. //alert(j);   
  87. if (document.cookie.substring(i, j) == arg)   
  88. return getCookieVal (j);   
  89. i = document.cookie.indexOf(" ", i) + 1;   
  90. if (i == 0) break;   
  91. }   
  92. return null;   
  93. }   
  94. var isPostBack = "<%= IsPostBack %>";   
  95. function getCookieVal (offset)   
  96. {   
  97. var endstr = document.cookie.indexOf (";", offset);   
  98. if (endstr == -1)   
  99. endstr = document.cookie.length;   
  100. return unescape(document.cookie.substring(offset, endstr));   
  101. }   
  102. //写入到Cookie   
  103. function SetCookie(name, value, expires)   
  104. {   
  105. var argv = SetCookie.arguments;   
  106. //本例中length = 3   
  107. var argc = SetCookie.arguments.length;   
  108. var expires = (argc > 2) ? argv[2] : null;   
  109. var path = (argc > 3) ? argv[3] : null;   
  110. var domain = (argc > 4) ? argv[4] : null;   
  111. var secure = (argc > 5) ? argv[5] : false;   
  112. document.cookie = name + "=" + escape (value) +   
  113. ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +   
  114. ((path == null) ? "" : ("; path=" + path)) +   
  115. ((domain == null) ? "" : ("; domain=" + domain)) +   
  116. ((secure == true) ? "; secure" : "");   
  117. }   
  118. function ResetCookie()   
  119. {  //xiariboke.net  
  120. var usr = document.getElementById('txtUserName').value;   
  121. var expdate = new Date();   
  122. SetCookie(usr, null, expdate);   
  123. }   
  124. </script>   
  125. </head>   
  126. <body onload="onLoginLoaded()">   
  127. <form id="form1">   
  128. <div>   
  129. 用户名:<input type="text" ID="txtUserName" onblur="GetPwdAndChk()">   
  130. <input type="password" ID="txtPassword">   
  131. 密码：<input type="checkbox" ID="chkRememberPwd" />记住密码   
  132. <input type="button" OnClick="SetPwdAndChk()" value="进入"/>   
  133. </div>   
  134. </form>   
  135. </body>   
  136. </html>   
标签：

给我留言