近来做记住密码时，用js的实现方式做了一下。

login.jsp页面代码

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
  5. %>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  8. <head>
  9. <base href="<%=basePath%>" />
  10. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  11. <link rel="stylesheet" href="./css/login.css" />
  12. <title>登录</title>
  13. <!-- 引入js-->
  14. <script src="./js/lib/jquery-1.8.0.min.js" type="text/javascript" ></script>
  15. <script src="./js/backjs/login.js" type="text/javascript" ></script>
  16. </head>
  17. <body>
  18. <div class="warp">
  19. <img src="./images/bf.png" alt="" />
  20. <div class="window">
  21. <div class="loginWindow"></div>
  22. <div class="loginWindowContent">
  23. <form action="#"  id="loginForm">
  24. <label for="" class="weicome">欢迎登录xxx系统</label>
  25. <label for="" class="slogan">智能随行    随到随停</label>
  26. <label for="" class="input"> <i> <span></span></i>
  27. <input type="text" placeholder="请输入用户名/手机号码" name="name" id="name" />
  28. </label>
  29. <label for="" class="input" style="margin-top:30px;"> <i><span style="background: url(./images/lock.png) no-repeat;"></span></i>
  30. <input type="password" placeholder="请输入密码" name="password" id="password"/>
  31. </label>
  32. <label for="" class="savePass">
  33. <input type="checkbox" value="savePW" name="savePW" id="savePW"/>记住密码 <a href="home/resetPwdUI">忘记登录密码？</a>
  34. </label>
  35. <label for="" class="sub">
  36. <p style="color: red" id="loginMes"></p>
  37. <input type="button" value="登录" id="login_BTN"/>
  38. </label>
  39. <label for="" class="reg">还不是智停车会员，<a href="home/registerUI"><b>点击免费注册</b>>></a></label>
  40. </form>
  41. </div>
  42. </div>
  43. <div class="footer">
  44. <div class="about">
  45. <b><a href="">关于xxx</b>
  46. </div>
  47. </div>
  48. </div>
  49. </body>
  50. </html>

login.js文件

  1. /**
  2. * 登录js
  3. */
  4. $().ready(function(){
  5. var loginSum = 0;
  6. //点击登录按钮事件
  7. $("#login_BTN").unbind("click");
  8. $("#login_BTN").bind("click",function(){
  9. //修改页面消息显示
  10. $("#loginMes").text("正在登陆。。。");
  11. //获取表单数据
  12. var data = $("#loginForm");
  13. var jsonData = data.serialize();
  14. var name = data.find("input[name='name']").val();
  15. var password = data.find("input[name='password']").val();
  16. var savePW = data.find("input[name='savePW']").val();
  17. if(name == '' || name == null){
  18. $("#loginMes").text("用户名不能为空");
  19. return;
  20. };
  21. if(password == '' || password == null){
  22. $("#loginMes").text("密码不能为空");
  23. return;
  24. };
  25. //判断重复提交
  26. if(loginSum == 1){
  27. //重复提交
  28. $("#loginMes").text("正在登陆，请稍候");
  29. return;
  30. };
  31. if(loginSum == 0){
  32. loginSum = 1;
  33. };
  34. //提交
  35. $.ajax({
  36. url:"home/login",
  37. type:'POST',
  38. data:jsonData,
  39. dataType:'json',
  40. error:function(){
  41. alert("出错了！！");
  42. loginSum = 0;
  43. },
  44. success:function (data){
  45. if(data.code == 0){
  46. //保存密码
  47. SetPwdAndChk();
  48. $("#loginMes").text("登录成功，正在跳转。。。");
  49. window.location.href="main/home";
  50. }else{
  51. $("#loginMes").text("登录失败，用户名或密码错误！");
  52. loginSum = 0;
  53. };
  54. }
  55. });
  56. });
  57. //用户名失去焦点时调用该方法
  58. $("#name").unbind("blur");
  59. $("#name").bind("blur",function(){
  60. GetPwdAndChk();
  61. });
  62. //=============js cookie===============
  63. GetLastUser();
  64. function GetLastUser() {
  65. var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
  66. var usr = GetCookie(id);
  67. if (usr != null) {
  68. document.getElementById('name').value = usr;
  69. } else {
  70. //document.getElementById('name').value = "001";
  71. }
  72. GetPwdAndChk();
  73. };
  74. //点击登录时触发客户端事件
  75. function SetPwdAndChk() {
  76. //取用户名
  77. var usr = document.getElementById('name').value;
  78. //alert(usr);
  79. //将最后一个用户信息写入到Cookie
  80. SetLastUser(usr);
  81. //如果记住密码选项被选中
  82. var checked = document.getElementById('savePW').checked;
  83. if (checked == true) {
  84. //取密码值
  85. var pwd = document.getElementById('password').value;
  86. //alert(pwd);
  87. var expdate = new Date();
  88. expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
  89. //将用户名和密码写入到Cookie
  90. SetCookie(usr, pwd, expdate);
  91. } else {
  92. //如果没有选中记住密码,则立即过期
  93. ResetCookie();
  94. }
  95. };
  96. function SetLastUser(usr) {
  97. var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
  98. var expdate = new Date();
  99. //当前时间加上两周的时间
  100. expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
  101. SetCookie(id, usr, expdate);
  102. };
  103. //用户名失去焦点时调用该方法
  104. function GetPwdAndChk() {
  105. var usr = document.getElementById('name').value;
  106. var pwd = GetCookie(usr);
  107. if (pwd != null) {
  108. document.getElementById('savePW').checked = true;
  109. document.getElementById('password').value = pwd;
  110. } else {
  111. document.getElementById('savePW').checked = false;
  112. document.getElementById('password').value = "";
  113. }
  114. };
  115. //取Cookie的值
  116. function GetCookie(name) {
  117. var arg = name + "=";
  118. var alen = arg.length;
  119. var clen = document.cookie.length;
  120. var i = 0;
  121. while (i < clen) {
  122. var j = i + alen;
  123. //alert(j);
  124. if (document.cookie.substring(i, j) == arg)
  125. return getCookieVal(j);
  126. i = document.cookie.indexOf(" ", i) + 1;
  127. if (i == 0)
  128. break;
  129. }
  130. return null;
  131. };
  132. function getCookieVal(offset) {
  133. var endstr = document.cookie.indexOf(";", offset);
  134. if (endstr == -1)
  135. endstr = document.cookie.length;
  136. return unescape(document.cookie.substring(offset, endstr));
  137. };
  138. //写入到Cookie
  139. function SetCookie(name, value, expires) {
  140. var argv = SetCookie.arguments;
  141. //本例中length = 3
  142. var argc = SetCookie.arguments.length;
  143. var expires = (argc > 2) ? argv[2] : null;
  144. var path = (argc > 3) ? argv[3] : null;
  145. var domain = (argc > 4) ? argv[4] : null;
  146. var secure = (argc > 5) ? argv[5] : false;
  147. document.cookie = name
  148. + "="
  149. + escape(value)
  150. + ((expires == null) ? "" : ("; expires=" + expires
  151. .toGMTString()))
  152. + ((path == null) ? "" : ("; path=" + path))
  153. + ((domain == null) ? "" : ("; domain=" + domain))
  154. + ((secure == true) ? "; secure" : "");
  155. };
  156. function ResetCookie() {
  157. var usr = document.getElementById('name').value;
  158. var expdate = new Date();
  159. SetCookie(usr, null, expdate);
  160. };
  161. });
  162. 转自：http://blog.csdn.net/u013614451/article/details/42201799

js实现cookie记住密码的更多相关文章

  1. cookie记住密码/base64加密（js控制）

    cookie记住密码/base64加密(js控制) • 配置cookie //设置cookie function setCookie ( name, value, expdays ) { var ex ...

  2. cookie记住密码功能

    很多门户网站都提供了记住密码功能,虽然现在的浏览器都已经提供了相应的记住密码功能 效果就是你每次进入登录页面后就不需要再进行用户名和密码的输入: 记住密码功能基本都是使用cookie来进行实现的,因此 ...

  3. 锋利的Jquery之插件Cookie记住密码

    先下载Jquery cookie js ,下载路径: http://plugins.jquery.com/cookie/ 记住,jquery的包要放在cookie的包前面,否则会产生异常 <!D ...

  4. jquery.cookie.js实现cookie记住用户名和密码

    记得导入 <script src="jquery.js" type="text/javascript"></script> <sc ...

  5. asp.net中用cookie记住密码上次不用登陆

    ------最佳解决方案--------------------写入CookieResponse.Cookies["UserName"].Value = "用户名&quo ...

  6. python+selenium利用cookie记住密码

    先上代码 1 from selenium import webdriver 2 from time import sleep 3 4 dr = webdriver.Chrome() 5 dr.get( ...

  7. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  8. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  9. node.js平台下，利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...

随机推荐

  1. 任意阶幻方（魔方矩阵）C语言实现

    魔方又称幻方.纵横图.九宫图,最早记录于我国古代的洛书.据说夏禹治水时,河南洛阳附近的大河里浮出了一只乌龟,背上有一个很奇怪的图形,古人认为是一种祥瑞,预示着洪水将被夏禹王彻底制服.后人称之为&quo ...

  2. web缓存

    web缓存HTTP协议的一个核心特性,它能最小化网络流量,并且提升用户所感知的整个系统响应速度. 什么能被缓存? *Logo和商标图像 *普通的不变化的图像(例如,导航图标) *CSS样式表 *普通的 ...

  3. 深入浅出设计模式——迭代器模式（Iterator Pattern）

    模式动机 一个聚合对象,如一个列表(List)或者一个集合(Set),应该提供一种方法来让别人可以访问它的元素,而又不需要暴露它的内部结构.针对不同的需要,可能还要以不同的方式遍历整个聚合对象,但是我 ...

  4. [Oracle] SQL*Loader 详细使用教程（1）- 总览

    SQL*Loader原理   SQL*Loader是Oracle提供的用于数据加载的一种工具,它比较适合业务分析类型数据库(数据仓库),能处理多种格式的平面文件,批量数据装载比传统的数据插入效率更高. ...

  5. Linux中关于安装包的分析。——Arvin

    初接解LINUX的,同样都是for linux,但rpm.tar.gz.deb包还是有很大区别的,这种区别可使安装过程进行不下去.那我们应该下载什么格式的包呢? rpm包-在红帽LINUX.SUSE. ...

  6. SQL Server如何删除多余tempDB文件

    某时,创建了多个tempDB文件,已经超过了服务器核心数,现象删除tempDB文件,使其保持与CPU核心数相同.但是在删除的时候,发现无法删除,报出错误:无法删除文件“tempdev3”,因为它不能为 ...

  7. Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸

    一.引言 Android的开源使厂商无需自行研发OS,大大降低了研发.生产的成本,使得Android平板品牌如雨后春笋般爆发,山寨机厂商们似乎又找到了一丝希望.与此同时带来的是广大开发者的苦不堪言,各 ...

  8. Java与mysql数据库编程中遇见“Before start of result set at com.mysql.jdbc.SQLError.createSQLException” 的解决办法

    这个Bug是因为在取出ResultSet对象,对其进行操作时,没有采用.next()方法将ResultSet对象的光标移至指定行,不管Statement对象执行SQL语句是否十分确定能搜出记录,也不可 ...

  9. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  10. C#窗体 WinForm 文件操作

    文件及文件夹操作 C/S:WinForm可以操作客户端文件 Client ServerB/S:浏览器服务 Brower Server 命名空间:using system .IO; 1. File类:文 ...