漫谈客户端存储技术之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);
        }

    }