封装Cookie

1.Cookie是浏览器存储数据的一种方式，存储在用户本地，而不是存储在服务器上，是本地存储

，一般会自动随着浏览器每次请求发送到服务器端，在请求Request Headers中会有一个Cookie的字段

2.作用场景：

1.网站的中英文切换

2.利用Cookie跟踪统计用户访问该网站的习惯，可以作为了解用户行为的一种工具，以便给用户提供更人性化的使用体验

3.设置Cookie

不能一起设置，只能单独设置

4.读取Cookie

读取的是一个由名值对构成的字符串，每个名值对之间由“; ”(一个分号和跟一个空格)隔开

5。Cookie的名称（Name）和值(Value)

创建Cookie时必须填写，其他属性可以使用默认值

6.Cookie的名称或值如果包含非英文字母，写入时则需要使用encodeURIComponent()编码

读取时用decodeURIComponent()解码

7.失效（到期）时间

对于失效的Cookie，会被浏览器清楚

如果没有设置失效时间，它存在内存中，当会话结束（浏览器关闭）时，Cookie消失，这样的cookie也称为会话cookie

8.长时间存在的Cookie，设置Expires或Max-age

expires值为Data类型

max-age值为数字，表示当前多少时间+多少秒后过期，单位秒

如果max-age的值为0或者负数，cookie会被删除

设置Cookie的失效时间max-age属性要紧跟在名值对后面设置

9.Domain

Domain限定了访问Cookie的范围（不同域名）

使用JS只能读写当前域或者父域的Cookie，无法读写其他域的Cookie

10.Path

Path限定了访问Cookie的范围（同一个域名下）

使用JS只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie

11.当Name，Domain，Path这三个字段都相同，才是同一个Cookie

12.HttpOnly

设置了HttpOnly属性的Cookie不能通过JS访问

13.Secure

Secure限定了只有在使用了https而不是http的情况下才可以发送给服务器端

14：封装Cookie

代码很简单，就不标明注释了:)

// 写入
export const set = (name, value, { maxAge, domain, path, secure } = {}) => {

    let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (typeof maxAge === 'nmber') {
        cookieText += `; max-age=${maxAge}`
    }
    if (domain) {
        cookieText += `; domain=${domain}`
    }
    if (path) {
        cookieText += `; path=${path}`
    }
    if (secure) {
        cookieText += `; secure`
    }
    document.cookie = cookieText
}

// 读取
export const get = name => {
    name = `${encodeURIComponent(name)}`;
    const cookies = document.cookie.split('; ');
    for (let item of cookies) {
        const [cookieName, cookieValue] = item.split('=');
        if (cookieName === name) {
            return decodeURIComponent(cookieValue)
        }
    }
    return undefined;
}

// 删除 
export const remove = (name, { domain, path } = {}) => {
    set(name, '', { domain, path, maxAge: -1 })
}