一、什么是cookie

cookie 是浏览器（客户端）用以存储网站信息的小型数据。小到不能超过4KB。

cookie的数据可以由服务器返回给浏览器，用于存储一些数据，便于下次访问使用。JS可以直接获取或者写入cookie。

二、JS写入或者读取cookie

1. 写入 cookie

document.cookie = "age=28";
document.cookie = "name=Lily";
console.info( document.cookie );  // age=28; name=Lily

注意：

（1）分号（；）后，有个空格。

（2）cookie值会累加，除非有相同的字段，才会覆盖前面的字段值。

写入 cookie 的时候，可以设置cookie值的寿命，也就是到什么时候cookie值无效。如果不设置cookie值的寿命，则关掉浏览器 cookie值就消失了。

let expiresDate = new Date();
expiresDate.setDate(expiresDate.getDate()+5);
document.cookie = `uname=Lily;expires=${expiresDate}`;   // 5天后，该字段无效。

2. 读取 cookie

 console.info( document.cookie );

如果 cookie 没有值，就是 undefined。有值，就是cookie字符串。如：

扫描二维码关注公众号，回复： 14634345 查看本文章

age=28; name=Lily

因此，要获取指定cookie的字段，需要把这个cookie字符串分解为数组，再分别获取字段值。可以使用以下函数。

// 获取指定的cookie值，如果获取不到，得到的就是 undefined
function  readCookie(tagName) {
    let arrCk = document.cookie.split(";");
    let obj = {}
    for(let i = 0 ; i<= arrCk.length-1 ; i++ ){
        let arrSmall = arrCk[i].trim().split("=");
        obj[arrSmall[0]] = arrSmall[1];
    }
    // console.info( obj );
    // console.info( obj[tagName] );
    return obj[tagName];
}

// 获取 cookie 值，存储在变量中。如果没有这个字段值，就是 undefined。
let unameCk = readCookie("uname");

三、利用cookie保存登录用户名和密码

HTML部分：

制作一个表单，有用户名和密码框。点击登录按钮，模拟登录，跳转到 do.html页面。

<form action="do.html" id="loginForm"  method="post">
    <div>
        uname: <input type="text" name="uname" id="uname">
    </div>
    <div>
        pwd：<input type="text" name="pwd" id="pwd">
    </div>
    <div>
        <button type="submit" id="myBtn">登录</button>
    </div>
</form>

点击“登录”按钮后，代码执行的顺序是：

1. 先执行submit按钮的 click 事件。

2.再执行表单 form的 submit 事件。

所以，为了保证提交数据的正确性，可以在提交按钮的 click 事件中，进行数据验证（本案例略）。在 form的 submit 事件中，存储用户名和密码数据到 cookie 里。

所以，JS 代码如下：

let loginForm = document.getElementById("loginForm");
let myBtn = document.getElementById("myBtn");
let uname = document.getElementById("uname");
let pwd = document.getElementById("pwd");
// 获取指定的cookie值，如果获取不到，得到的就是 undefined
function  readCookie(tagName) {
    let arrCk = document.cookie.split(";");
    let obj = {}
    for(let i = 0 ; i<= arrCk.length-1 ; i++ ){
        let arrSmall = arrCk[i].trim().split("=");
        obj[arrSmall[0]] = arrSmall[1];
    }
    // console.info( obj );
    // console.info( obj[tagName] );
    return obj[tagName];
}
// 在点击按钮的时候，进行数据验证
myBtn.addEventListener("click",function(e){
    alert("click");
   //  如果数据有误，就阻止数据提交。阻止按钮的默认事件。
    // e.preventDefault(); // 阻止表单提交
});


// 获取 cookie 值，并显示在文本框或者密码框中
let unameCk = readCookie("uname");
let pwdCk = readCookie("pwd");
if( !!unameCk){
    uname.value = unameCk;
}
if( !!pwdCk ){
    pwd.value = pwdCk;
}

// 利用 cookie 记录用户名和密码
loginForm.addEventListener("submit",function(){
    let expiresDate = new Date();
    expiresDate.setDate(expiresDate.getDate()+5);  // 设置cookie值 5天后过期。
    if(uname.value.trim()!=""){   // trim() 去掉cookie字段值前后的空格。
        document.cookie = `uname=${uname.value};expires=${expiresDate}`;
    }
    if(pwd.value.trim()!=""){    // trim() 去掉cookie字段值前后的空格。
        document.cookie = `pwd=${pwd.value};expires=${expiresDate}`;
    }
    alert("submit");
});
console.info( document.cookie );

输入用户名和密码后，提交数据。

重新关闭页面再打开，可以发现之前写的数据已经填入在了文本框里了。

提醒：cookie 一定要运行在服务器下才有效。Webstorm和HBuilder之类的内置服务器也可以。直接访问静态 HTML 文件是无效的。

JavaScript 练手小技巧：利用cookie保存登录用户名和密码

一、什么是cookie

二、JS写入或者读取cookie

1. 写入 cookie

2. 读取 cookie

三、利用cookie保存登录用户名和密码

猜你喜欢