js存储cookie(使用JavaScript存储cookie)

什么是Cookie

Cookie又称为“小甜饼”，是指服务器发送到用户浏览器并保存在本地(硬盘或内存)的一小块数据。浏览器下次访问该服务器时，会携带该Cookie，可以让服务器读取到之前保存下来的信息。

Cookie的作用

Cookie主要用来记住用户的一些信息，比如添加购物车、登录状态等信息，方便用户下次访问时直接使用。还有些站点为了统计网站访问量和用户行为，会使用Cookie搜集信息。

JavaScript中的Cookie

在JavaScript中，可以通过Document.cookie属性来操作Cookie，通过它可以读写当前文档的Cookie信息。

当想将数据保存到Cookie中，只要使用Document.cookie属性进行赋值即可。例如，需要将名字为value，内容为123的Cookie写入，只要通过如下代码即可实现：

document.cookie = "value=123";

这样就可以将该Cookie的键值对写入到Cookie中，也可以添加过期时间、域名和路径等参数，使其更加灵活可控。

JavaScript中读取Cookie

读取Cookie时，可以通过split将输出转换成一个数组来对其进行遍历，每一项再进行切分处理，这样就可以得到Cookie中的所有键值对。例如：

function getCookie(name) {

    let cookieArr = document.cookie.split("; ");
    for (let i = 0; i < cookieArr.length; i++) {
        let keyArr = cookieArr[i].split("=");
        if (keyArr[0] === name) {
            return unescape(keyArr[1]);
        }
    }
}

这段代码所做的是：将获取到的Cookie依次进行切分，取出每一个Cookie的键值对。再将其中的键和函数传入的名称进行比较，返回相应值即可。

JavaScript删除Cookie

有时候需要将某些Cookie删除，可以通过将其设置为过期的方式来实现。如下所示：

function deleteCookie(name) {

    let exp = new Date();
    exp.setTime(exp.getTime() - 1);
    let value = getCookie(name);
    if (value !== null) {
        document.cookie= name + "="+ value + ";expires=" + exp.toGMTString();
    }
}

这个函数所做的是：获取到相应Cookie的值，将其设置过期时间为一天前，这样就可以实现删除该Cookie的目的。

应用：记住用户的登录信息

在实际应用中，除了记住一些临时性的数据之外，还可以通过Cookie来实现记住用户的登录状态。具体实现思路如下：

在用户进行登录操作时，可以检查“记住我”复选框是否勾选，如果勾选，就将用户名和密码写入Cookie中，并设置过期时间为7天；

下次用户访问该站点时，使用JavaScript的方法读取对应的Cookie，如果该Cookie存在，说明上一次用户是选择“记住我”登录的，不需要再次输入用户名和密码，直接将其写入输入框中。

这样就可以方便用户快速登录，提高用户的使用体验。

总结

在JavaScript中，操作Cookie是一件非常方便的事情。我们可以通过Document.cookie来进行操作，包括写入、读取和删除等。在实际应用中，可以使用Cookie来记住一些临时性的数据，更加重要的是可以实现用户登录状态的记忆，为用户提供更好的使用体验。