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

        }

    }

巴特西

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

最新文章

热门文章