漫谈客户端存储技术之Cookie篇

Cookie

说到Cookie，不管作为前端开发人员还是后端开发人员并不陌生，作为一种最古老、最稳定的客户端存储形式，即便是在当下各种新的客户端存储技术层出不穷的时代，它仍旧有其一席之位。Cookie 使用 HTTP header 发送，具体来说是名为“Cookie”的 HTTP header，每次请求的时候都会由浏览器发送到服务器，同时又从服务器发送到浏览器，是一种双向传输的形式。

=== Request Headers ===
......
Cookie: AGL_USER_ID=f695f47d-f643-46cec-bf63-6255asdasdqwe4b3a24
... ......

以前，每个域名最多只能有 20个 Cookie，但如今的浏览器似乎已经去掉了这个限制（浏览器没有限制它可以拥有的 Cookie 数量），但是最佳的实践是每个域名 50个、大小总计 4KB 的 Cookie 是安全的（Cookie过多有可能导致后台服务报错）。

每个Cookie 对应唯一的域名。这也就意味着在A网站域名上设置的 Cookie 值无法在B网站使用。从而在一定程度上保证了网站的安全，毕竟任何人都不希望其它网站影响自己的网站上使用Cookie。 另外Cookie 也可以对应唯一的子域名。例如， map.baidu.com 是 baidu 网站的一个独立的子域名。你可以创建只有map.baidu,com可以读取的 Cookie，也可以创建 www.baidu.com 和 map.baidu.com 都可以读取Cookie

 

1、创建Cookie

 

     Cookie 默认是没有 API的。要使用 Cookie的话，只需要在代码中写入如下代码。即可创建一个 Cookie

1 document.cookie = 'cookname=cookievalue' // 默认设置

 

     再者。你还可以设置Cookie的过期时间。我们只需要在 Cookie 值后面使用一个分号然后追加一个exprires的关键字等于一个时间即可

  

document.cookie = 'cookname=cookievalue;expires=Mon Jul 04 2022 16:36:24 GMT' 

 

    另外还可以进一步扩展，指定该 Cookie 只对某个域名有效，如下，该Cookie只在域名为www.xxx.com的网站中生效。具体还是根据自己项目的需要来设置

 

document.cookie = 'cookname=cookievalue;expires=Mon Jul 04 2022 16:36:24 GMT; domain=www.xxx.com'

 

2、读取Cookie

 

    Cookie的读取相对来说就要简单很多的，我们只要通过document.cookie的方式就可以获取到网站上所设置的Cookie，

    

document.cookie

 

3、删除Cookie

 

　　假使你要删除 Cookie得话，只需要将其过期时间设置成过去的时间即可（名称必须与你想要删除的 Cookie 名称一致）

　　

document.cookie = 'cookname=cookievalue; expires=Thu, 01 Jan 1970 00:00:00 GMT'

 

简易版封装

// 简单封装
    const CookieUtile = {
        // 设置
        setCookie(key, value, time) {
            const date_ = new Date() 
            date_.setDate(date_.getDate() + time) // 当前时间+过期时间
            document.cookie = key + '=' + value + ';expires=' + date_ // 写入到document
        },
        // 设置
        getCookie(key) {
            const CookieArray = document.cookie.split(';')  // 多个cookie通过;分割为多个由'键=值'组成的数组
            for (let i = 0; i < array.length; i++) {
                const newCookieArray = CookieArray[i].split('=') //去掉中间的等号  得到只有键值组成的新数组
                const newCookieKey = newCookieArray[0].replace(/^\s/, '') // 去除多个cookie存值的时候可能出现cookie的值名前面有空格的情况
                if (newCookieKey == key) {
                    return newCookieArray[1]
                }
                 return ''
            }
        },
        // 删除
        getCookie(key) {
            this.setCookie('name', '', -1);
        }

    }