删除-登录案例演示

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

创建、读取、及删除 cookie的函数封装

function setCookie(key,val,options){
    options = options || {};
    var path = "";
    if(options.path){
        path = ";path=" + options.path;
    }
    var expires = "";
    if(options.expires){
        var d = new Date();
        d.setDate(d.getDate()+options.expires);
        expires = ";expires=" + d;
    }
    document.cookie = key + "="+ val + path + expires;
}

function removeCookie(key,options){
    options = options || {};
    options.expires = -1;
    setCookie(key,132,options);
}

function getCookie(key){
    var arr = document.cookie.split("; ");
    for(var i=0;i<arr.length;i++){
        if(arr[i].split("=")[0] === key){
            return arr[i].split("=")[1];
        }
    }
    return "";
}

案例演示

<body>
    用户名：<input type="text" id="user"><br>
    密码：<input type="text" id="pass"><br>
    <input type="checkbox" id="onoff">记住帐号密码
    <input type="button" value="登录" id="btn">
</body>
<script src="../cookie.js"></script>

<script>

    class Login{
        constructor(){
            this.user = document.getElementById("user")
            this.pass = document.getElementById("pass")
            this.onoff = document.getElementById("onoff")
            this.btn = document.getElementById("btn")
            
            // 1.绑定事件
            this.init();
            // 0.读取cookie，并渲染初始数据
            this.getCookie();
        }
        init(){
            var that = this;
            this.btn.onclick = function(){
                // 保存数据
                that.u = that.user.value;
                that.p = that.pass.value;
                // 2.判断是否存储
                that.isStorage()
            }
        }
        isStorage(){
            // console.log(this.onoff.checked)
            if(this.onoff.checked){
                // 3.存储cookie
                this.setCookie()
            }
        }
        setCookie(){
            // 存之前将格式设置成对象
            var obj = {
                user:this.u,
                pass:this.p
            };
            // 4.存时，把对象转成json字符
            setCookie("login",JSON.stringify(obj),{
                expires:3
            })
        }
        getCookie(){
            // 如果没有读到数据，拿到空字符，json.parse会报错，处理默认值
            var str = getCookie("login") ? getCookie("login") : '{}';
            this.l = JSON.parse(str);
            
            // 设置时如果对象中没有数据，处理默认值
            this.user.value = this.l.user || "";
            this.pass.value = this.l.pass || "";
        }
    }

    new Login();
</script>

posted @ 2022-09-11 02:01 JackieDYH 阅读(12) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

JackieDYH