index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>记住密码</title>
</head>
<body>
用户名: <input type="text" id="user" />
<br />
密码: <input type="password" id="pass" />
<br />
<input type="checkbox" id="isRemember" />记住密码
<br />
<button onclick="login()">登陆</button>
</body>
</html>
<!-- 导入封装好的cookie -->
<script src="./mycookie.js"></script>
<script>
// 如果选中了记住密码 则页面刷新直接把数据显示在页面中
if (getCookie("isRemember")) {
document.getElementById("user").value = getCookie("user");
document.getElementById("pass").value = getCookie("pass");
document.getElementById("isRemember").checked = getCookie("isRemember");
}
// 获取页面数据
function login() {
var user_ = document.getElementById("user").value;
var pwd_ = document.getElementById("pass").value;
var isRemember_ = document.getElementById("isRemember").checked;
console.log(user_);
console.log(pwd_);
console.log(isRemember_);
//判断 如果记住密码 数据存储Cookie
if (isRemember_ == true) {
setCookie("user", user_);
setCookie("pwd", pwd_);
setCookie("isRemember", isRemember_);
} else {
//否则删除
removeCookie("user");
removeCookie("pwd");
removeCookie("isRemember");
}
}
</script>
mycookie.js
// 设置cookie 需要传入三个参数 键 值 过期时间
function setCookie(key,value,time) {
var date_=new Date();
date_.setDate(date_.getDate()+time);
document.cookie=`${key}=${value};expires=${date_}`;
}
// 获取cookie 键名
function getCookie(key){
//多cookie进行字符串分割
var arr = document.cookie.split("; ");
for(var i=0;i<arr.length;i++){
var newArray = arr[i].split('=');
if(newArray[0] == key){
return newArray[1];
}
}
}
//删除cookie 通过键名
function removeCookie(key){
this.setCookie(key,"",-1);
}
// 清空Cookie
function clearCookie() {
var array=document.cookie.split("; ")
for (var item of array) {
// console.log(item);
var newArray = item.split('=');
this.setCookie(newArray[0], '', -1)
}
}
扫一扫
2020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
