一文读懂Cookie

cookie

cookie是一些数据，存储于你电脑上的文本文件中，当web服务器向浏览器发送web页面时，连接关闭之后，服务端并不会记录用户的信息，此时cookie的作用便是用于解决“如何记录客户端的用户信息”。即让这些信息变得持久化，简单来说：

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

cookie以键值对的形式进行存储。记录密码功能便是一种cookie + session的应用。

应用：

• 保存用户登陆状态，将用户sessionid存储在cookie之中，下次访问该页面就不需要重新登陆，常用过期时间包括：一个月、三个月、一年。
• 跟踪用户行为，如天气预报网站针对特定用户展示特定信息。
• 定制页面

缺点：

• 可被禁用
• 与浏览器相关，跨浏览器不可互相访问
• 可被删除
• 安全性不高

创建cookie很简单，只需要这样：

document.cookie = "userID=husen"

这样便创建了一个名为userID的cookie。

需要注意的是：cookie的键和值均不能使用分号、逗号、等号以及空格，因此我们常常需要对值使用escape函数编码，将特殊符号使用十六进制表示，从而可以存储到cookie之中，避免中文乱码。即：

document.cookie = "userID2=" + escape("Cookie Testing")

当使用escape编码后，取出值需要用unescape进行解码。

获取cookie值只需要执行document.cookie即可。如：

console.log(document.cookie)
// 输出
userID=828; userID2=Cookie%20Testing

因此我们如果想要获得特定的键对应的值，需要对该字符串进行解析。下面我们获取userID2对应的值。

// 设置cookie
document.cookie = "userID=husen"
// escape()函数
document.cookie = "userID2=" + escape("Cookie Testing")

console.log(document.cookie)
var cookies = document.cookie.split("; ");
var userID2 = "";
for (var i = 0; i < cookies.length; i++) {
     var arr = cookies[i].split("=")
     if ("userID2" == arr[0]) {
           userID2 = unescape(arr[1])
           break
     }
}
console.log(userID2)

下面为cookie设置终止日期。可以用下面的选项进行实现：

document.cookie="userID=husen;expiress=GMT_String"

如果要将cookie设置为10天后过期，可以这样实现：

// 设置过期时间为10天
var date = new Date()
var expires = 10
date.setTime(date.getTime() + expires * 24 * 3600 * 1000)
document.cookie = "userID=husen;expires=" + date.toGMTString()

删除cookie：设置过期时间为一个过去的时间即可。

通过指定path属性，我们可以指定可访问cookie的路径。如：

document.cookie="userId=husen; path=/test";

表示cookie仅在test目录下可使用。

下面对cookie进行代码封装，实现增删改查：

增加：

function addCookie(key, value, expires = 0) {
    var cookieStr = key + "=" + escape(value)
    if (expires > 0) {
        var date = new Date()
        date.setTime(date.getTime() + expires * 24 * 3600 * 1000)
        cookieStr = cookieStr + "; expires" + date.toGMTString();
    }
    document.cookie = cookieStr;
}

删除：

function deleteCookie(key) {
    var date = new Date();
    date.setTime(date.getTime() - 10000);
    document.cookie = key + "= over; expires=" + date.toGMTString();
}

**更新：**和增加一样

查询：

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