Cookie记住密码

最新推荐文章于 2022-08-23 14:53:26 发布

原创最新推荐文章于 2022-08-23 14:53:26 发布 · 223 阅读

CC 4.0 BY-SA版权

Cookie 记住密码！

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
   <metacharset="UTF-8">
   <scripttype="text/javascript"src="${base}/js/jquery.cookie.js"></script>
   <scripttype="text/javascript"src="${base}/js/jquery.base64.js"></script>
   <scriptsrc="${base}/js/user_login.js"></script>
   <title>用户登录</title>
</head>
<body>
       <formid="user-login">
                   <divclass="row col m8offset-m2 valign-wrapper">
                       <spanclass="col m4">账号：</span>
                       <inputname="loginname"type="text"placeholder="请输入账号"id="loginname">
                    </div>
                   <divclass="row col m8offset-m2 valign-wrapper">
                       <spanclass="col m8offset-m3"id="wrong"></span>
                   </div>
                    <divclass="row col m8offset-m2 pswtop valign-wrapper">
                       <spanclass="col m4">密码：</span>
                       <inputname="password"type="password"placeholder="请输入密码"id="password">
                       <spanstyle="color:red"></span>
                    </div>
                    <divclass="row col m8offset-m2 valign-wrapper">
                       <inputtype="checkbox"class="filled-in"id="filled-in-box"/>
                       <labelfor="filled-in-box">记住密码</label>
                   </div>
                    <divclass="row col m8offset-m2">
                       <spanstyle="color:red"></span>
                       <aclass="btn col m4offset-m2"id="login">登录</a>
                       <buttontype="reset"class="btn col m4 offset-m1"id="reset">重置</button>
                    </div>
        </form>
</body>

1. //首页在页面引入这两个js文件！

<scripttype="text/javascript"src="${base}/js/jquery.cookie.js"></script>
<scripttype="text/javascript"src="${base}/js/jquery.base64.js"></script>
Cookie.js是操作浏览器cookie的 base64是对cookie进行加密的！

2 //获取cookie

//记住用户名在浏览器没关闭情况下使用。直接给用户名赋cookie里面的值
	if ($.cookie("email") && $("#user-login").find("input[name=loginname]")) {
		$("#loginname").val($.base64.decode($.cookie("email")));
	}
	//判断用户是否勾选记住密码！
	if ($.cookie("rember") == "true") {
		if ($.cookie("pass") && $("#user-login").find("input[name=password]")) {
			$("#password").val($.base64.decode($.cookie("pass")));
			$("#filled-in-box").prop("checked", "checked");
		}
	}

3 //保存cookie

var remember = $("#filled-in-box").is(":checked");  //用户是否勾选
	if (remember) {
		$.cookie("email", $.base64.encode(logname), {
			expires: 14,
		});
		//将用户的用户名保存至cookie的email。保存时间是14天！
		$.cookie("pass", $.base64.encode(logpsw), {
			expires: 14,
		});
		//将用户的密码保存至cookie的pass。保存时间是14天！
		$.cookie("rember", remember, {
			expires: 14,
		});
		//将是否记住密码的状态保存至cookie的rember.内容是布尔值，是true或false。保存时间是14天！
	} else {
		$.cookie("email", $.base64.encode(logname));
		$.cookie("rember", remember);
		//用户不记住密码的情况下，cookie本次有效！
	}