2020.9.11 cookie存储实例30天免登陆

最新推荐文章于 2024-12-03 12:13:07 发布

拂晓东夕

最新推荐文章于 2024-12-03 12:13:07 发布

阅读量1k

点赞数 5

本文链接：https://blog.youkuaiyun.com/weixin_48364327/article/details/108531236

版权

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>