I believe we have played QQ, but be careful if you found a password save feature, when you select the Save account password, and so the next time you log on, when you will be displayed directly on your account password, eliminating the need for Once again, we enter the time, then such a function is how to achieve it, I now realize through the cookie simply for everyone to look at this function.
First of all to share cookie package of three functions:
//设置cookie
//ops指用来处理有效时间以及路径
function setCookie(key,val,ops){
ops = ops || {};
let e = "";
if(ops.expires){
var d = new Date();
d.setDate( d.getDate() + ops.expires );
e = ";expires="+d;
}
let p = ops.path ? ";path="+ops.path : "";
document.cookie = `${key}=${val}${p}${e}`;
}
//获取cookie
function getCookie(key){
let strC = document.cookie;
let arrC = strC.split("; ");
for(var i=0;i<arrC.length;i++){
if(arrC[i].split("=")[0] === key){
return arrC[i].split("=")[1];
}
}
return "";
}
//删除cookie
function removeCookie(key,ops){
ops = ops || {};
ops.expires = -1;
setCookie(key,"qweqwezzdasd",ops);
}
Here we begin our case put.
First, on the first page of results do a simple login screen
<body>
<div class="box">
账号：<input type="text" name="" id="admin" value="" /><br />
密码：<input type="text" name="" id="password" value="" /><br />
<input type="checkbox" name="remember" id="remember" value="" />
<label for = "remember">点击保留信息7天</label>
<input type="button" name="btn" id="btn" value="模拟登陆" />
</div>
</body>
Renderings:
Then use our js to achieve the effect of it.
Analysis:
1. First we have to get the value of the two text boxes,
2. determine if the checkbox, if selected, we need to preserve data created by the cookie
3. Allow the data displayed in the text box to achieve each refresh will have the original account and password exist.
class admin{
// 1.构造函数
constructor(){
this.adm = document.getElementById("admin");
this.pas= document.getElementById("password");
this.rem = document.getElementById("remember");
this.btn = document.getElementById("btn");
}
// 2.当点击登陆后对在文本框中的信息进行获取(事件)
addEvent(){
var that = this;
this.btn.onclick = function(){
that.adm2 = that.adm.value;
that.pas2 = that.pas.value;
that.isSetCookie();
}
}
// 3.判断是否选中复选框，如有对数据进行创建cookie保存
isSetCookie(){
// 判断是否选中
if(this.rem.checked){
// 将信息打包
let msg = {
adm : this.adm2,
pas : this.pas2
}
// 有效期为7天(因为cookie只可以存字符，所以要把msg用josn的字符存储)
setCookie("admin",JSON.stringify(msg),{
expires:7
})
}
}
// 4.将cookie存储的信息解析,显示在文本框中
getUser(){
// 为了能通过属性获取到值,把字符改成对象格式
// 初始获取cookie时，如果没有存过，拿到空字符，JSON不能转换
// 所以，要做默认处理，默认对象中要提前设置user和pass属性，放置将来将undefined放在输入框内
let msg = getCookie("admin") ? JSON.parse(getCookie("admin")) : {adm:"",pas:""};
this.adm.value = msg.adm;
this.pas.value = msg.pas;
}
}
var t = new admin();
t.addEvent();
t.getUser();
Renderings:
When you enter the account password check box, click the button, you can find information has been stored by a cookie, so when re-entering the page, show the effect of the account password can be achieved.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
账号：<input type="text" name="" id="admin" value="" /><br />
密码：<input type="text" name="" id="password" value="" /><br />
<input type="checkbox" name="remember" id="remember" value="" />
<label for = "remember">点击保留信息7天</label>
<input type="button" name="btn" id="btn" value="模拟登陆" />
</div>
</body>
<script src="public/public.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
class admin{
// 1.构造函数
constructor(){
this.adm = document.getElementById("admin");
this.pas= document.getElementById("password");
this.rem = document.getElementById("remember");
this.btn = document.getElementById("btn");
}
// 2.当点击登陆后对在文本框中的信息进行获取(事件)
addEvent(){
var that = this;
this.btn.onclick = function(){
that.adm2 = that.adm.value;
that.pas2 = that.pas.value;
that.isSetCookie();
}
}
// 3.判断是否选中复选框，如有对数据进行创建cookie保存
isSetCookie(){
// 判断是否选中
if(this.rem.checked){
// 将信息打包
let msg = {
adm : this.adm2,
pas : this.pas2
}
// 有效期为7天(因为cookie只可以存字符，所以要把msg用josn的字符存储)
setCookie("admin",JSON.stringify(msg),{
expires:7
})
}
}
// 4.将cookie存储的信息解析,显示在文本框中
getUser(){
// 为了能通过属性获取到值,把字符改成对象格式
// 初始获取cookie时，如果没有存过，拿到空字符，JSON不能转换
// 所以，要做默认处理，默认对象中要提前设置user和pass属性，防止将来将undefined放在输入框内
let msg = getCookie("admin") ? JSON.parse(getCookie("admin")) : {adm:"",pas:""};
this.adm.value = msg.adm;
this.pas.value = msg.pas;
}
}
var t = new admin();
t.addEvent();
t.getUser();
</script>
</html>
