通常我们在开发一个登陆应用的时候,有一个非常常见的业务需求,那就是保留用户登陆信息多少天!!
不废话,直接上demo!!
<!-- * @Author: [ZGM] IME33 * @Date: 2017-10-09 13:34:23 * @Last Modified by: [ZGM] <[email protected]> * @Last Modified time: 2017-10-09 13:44:23 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cookie demo测试</title> <style type="text/css"> *{padding: 0;margin: 0;font-family: "微软雅黑";} h3{margin: 20px auto;text-align: center;} .formbox{width: 600px;height:400px;border: 2px solid green;border-radius: 3px;margin: 20px auto;} ul,li{list-style: none;text-align: center;} li input{width: 500px;margin:20px 50px 20px 50px;height: 32px;border:1px solid #e2e2e2;padding: 0 0 0 12px;} .subbtn{appearance:none;color:#fff;width: 200px;height: 30px;background: #da2330;border-radius: 4px;margin: 0 auto;border:none;} #rmbPassword{ width: 20px; height: 20px; display: inline-block; background: url(images/checkimg.png) no-repeat; background-position: 0px 0; background-size: 200% 100%; vertical-align: bottom; } #rmbPassword.active{ background-position: -20px 0; background-size: 200% 100%; } </style> </head> <body> <h3>cookie demo测试</h3> <div class="formbox"> <ul> <li class="input"> <input id="userName" name="username" tabindex="1" placeholder="用户名/手机号" type="text" value="" size="25"> </li> <li class="input"> <input id="password" name="password" tabindex="2" placeholder="密码" type="password" value="" size="25" autocomplete="off"> </li> <li class="auto-login fl" onclick="check()"> <b id="rmbPassword" class="active"></b> <a href="javascript:void(0)" style="color:#666666;">记住我</a> </li> <li> <button class="subbtn" onclick="login()">触发</button> </li> </ul> </div> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ getRememberInfo(); }); function login(){ var userName = $("#userName").val(); if(userName && userName!=""){ userName = userName.toLowerCase(); $("#userName").val(userName); setCookie("checkSettlein","true",168,"/"); if($("#rmbPassword").hasClass("active")){ setCookie("rmbPassword","active",168,"/passport"); setCookie("userName",userName,168,"/passport"); setCookie("password",$("#password").val(),168,"/passport"); }else{ deleteCookie("userName","/passport"); deleteCookie("password","/passport"); setCookie("rmbPassword","unactive",168,"/passport"); } } return true; } //获取cookie信息 function getRememberInfo() { try { var rmbPassword = getCookieValue("rmbPassword"); var userName = $("#userName").val(); var userPassword = $("#password").val(); if(rmbPassword && rmbPassword=="active"){ $("#rmbPassword").addClass("active"); userName = getCookieValue("userName"); userPassword = getCookieValue("password"); $("#userName").val(userName); $("#password").val(userPassword); }else if(rmbPassword == "unactive"){ $("#rmbPassword").removeClass("active"); } } catch (err) { console.log("NO RMB PASSWORD!"); } } //新建cookie。 //hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie(如果这个cookie存在)。 function setCookie(name, value, hours, path) { var name = EnEight(escape(name)); var value = EnEight(escape(value)); var expires = new Date(); expires.setTime(expires.getTime() + hours * 3600000);//setTime() 方法以毫秒设置 Date 对象 path = path == "" ? "" : ";path=" + path; _expires = (typeof hours) == "string" ? "" : ";expires="+ expires.toUTCString(); document.cookie = name + "=" + value + _expires + path; } //获取cookie值 function getCookieValue(name) { var name = EnEight(escape(name)); var allcookies = document.cookie; name += "="; var pos = allcookies.indexOf(name); if (pos != -1) { var start = pos + name.length; var end = allcookies.indexOf(";", start); if (end == -1) end = allcookies.length; var value = allcookies.substring(start, end); return DeEight(unescape(value)); //对它解码 } else return ""; //搜索失败,返回空字符串 } //删除cookie 生命周期设置0 function deleteCookie(name, path) { var name = EnEight(escape(name)); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "=" + ";expires=" + expires.toUTCString() + path;//toUTCString根据世界时 (UTC) 把 Date 对象转换为字符串 } /*8进制加密*/ function EnEight(value){ var monyer = new Array(); for(var i=0;i<value.length;i++){ monyer+="\\"+value.charCodeAt(i).toString(8); } return monyer; } /*8进制解密*/ function DeEight(value){ var monyer = new Array(); var s=value.split("\\"); for(var i=1;i<s.length;i++){ monyer+=String.fromCharCode(parseInt(s[i],8)); } return monyer; } </script> </body> </html>
主要业务逻辑:用户进入界面 → 读取document的cookie数据 → 解密匹配到数据填入输入框 → 用户登陆 / 用户触发 → 获取用户键入信息 → 加密 / 转码→ setcookie存入name值 生命周期 等信息 → 完成!
结果:
罗列几个方法:
1、setTime() 方法以毫秒设置 Date 对象。eg:dateObject.setTime(millisec);toUTCString() 方法可根据世界时 (UTC) 把 Date 对象转换为字符串,并返回结果。
2、charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。eg:stringObject.charCodeAt(index)
3、fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
4、escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
5、unescape() 函数可对通过 escape() 编码的字符串进行解码。
欢迎指正交流!!