漫談客戶端存儲技術之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);
        }

    }

posted @ 2022-07-04 17:31 修謙得益閱讀(198) 評論(0) 收藏舉報

刷新頁面返回頂部

修謙得益

漫談客戶端存儲技術之Cookie篇

公告