使用Cookie存取用户登录信息

通常我们在开发一个登陆应用的时候，有一个非常常见的业务需求，那就是保留用户登陆信息多少天！！

不废话，直接上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() 编码的字符串进行解码。

欢迎指正交流！！

使用Cookie存取用户登录信息

猜你喜欢