cookie
cookie是document下的一个属性，在真实的网络环境中进行，可用127.0.0.1/ 相对主机名
<script>
document.cookie = "name=changxiaodong";
</script>
在浏览器的Application中检测，默认生命周期关闭即消失，要使生命周期长一点，需要在后面加expires 如下
let date = new Date();
date.setDate(date.getDate() + 10);
document.cookie = "name=changxiaodong;expires=" + date;
现在即使关闭之后，也会有记录，表示每次打开之后在当前时间之后记录保存10天
设置cookie的通用函数
// 设置cookie的通用函数
function setCookie(key,value,expires){
if(typeof expires === "object"){
document.cookie = `${
key}=${
value};expires=${
expires}`
}
if(typeof expires === "number"){
let date = new Date();
date.setDate(date.getDate() + expires);
document.cookie = `${
key}=${
value};expires=${
date}`
}
}
读取cookie的函数
// 读取cookie的通用函数
function getCookie(k){
let result = {
}
let arr = document.cookie.split("; ");
arr.forEach(item=>{
let key = item.split("=")[0];
let value = item.split("=")[1];
result[key] = value;
})
if(!k){
return result;
}
return result[k];
}
删除cookie的函数
// 删除cookie
function removeCookie(key){
let date = new Date("1970-01-01");
document.cookie = `${
key}=1;expires=${
date}`
}
应用实例：30天免登陆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>30天免登陆</title>
<style>
body{
font-size: 12px;}
input{
border-radius: 2px;border: skyblue 1px solid;margin-top: 5px;}
div{
width: 200px;margin: 0 auto;border: #e3e3e3 1px solid;text-align: center;}
#btn{
margin: 20px 45px;font-size: 14px;background-color: rgb(143, 143, 238);border-radius: 5px;}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入姓名" id="usename">
<p></p>
<input type="password" placeholder="请输入密码" id="password">
<p></p>
<label for="rememberMe">三十天内免登陆</label><input type="checkbox" id="rememberMe">
<br>
<button id="btn">点击登录</button>
</div>
<script src="library.js"></script>
<script>
//获取元素
let usename = $("#usename");
let password = $("#password");
let checkbox = $("#rememberMe");
let obtn = $("#btn");
obtn.onclick = function(){
if(checkbox.checked){
setCookie("usename",usename.value,30);
setCookie("password",password.value,30);
}
}
// 页面加载完成后执行(因为在body之后，可以不写加载是事件)
window.onload = function(){
if(getCookie("usename")&&getCookie("password")){
usename.value = getCookie("usename");
password.value = getCookie("password");
}
}
</script>
</body>
</html>
效果图如下
