cookie 詳解

HTTP Cookie（也叫 Web Cookie 或瀏覽器 Cookie）是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶並發送到服務器上。通常，它用於告知服務端兩個請求是否來自同一瀏覽器，如保持用戶的登錄狀態。Cookie 使基於無狀態的 HTTP 協議記錄穩定的狀態信息成為了可能。

Cookie 曾一度用於客戶端數據的存儲，因當時並沒有其它合適的存儲辦法而作為唯一的存儲手段，但現在隨着現代瀏覽器開始支持各種各樣的存儲方式，Cookie 漸漸被淘汰。由於服務器指定 Cookie 后，瀏覽器的每次請求都會攜帶 Cookie 數據，會帶來額外的性能開銷（尤其是在移動環境下）。新的瀏覽器 API 已經允許開發者直接將數據存儲到本地，如使用 Web storage API （本地存儲和會話存儲）或 IndexedDB 。

cookie 的應用

Cookie 用於以下幾個方面：

• 購物車（網購）
• 自動登錄（登錄賬號時的自動登錄）
• 精准廣告
• 平常瀏覽網頁時有時會推出商品剛好是你最近瀏覽過，買過的類似東西，這些是通過 cookie 記錄的。
• 記住登錄狀態

cookie 的構成

• 名稱：一個唯一確定 cookie 的名稱，部分大小寫，cookie 的名字必須是經過 URL 編碼的，一般可以采用某個前綴在加上當前時間的做法，這樣的話名稱能夠確保是唯一的，也比較方便。
• 值：存儲在 cookie 中的字符串值，必須經過被 URL 編碼
• 域：對於哪個域是有效的，如果沒有設置的話，默認來自設置 cookie 的那個域，在上訴例子中就是.Mozilla.org
• 失效時間：表示 cookie 何時應該被刪除的時間戳，這個日期是 GMT 格式的日期，如果設置是以前的時間，cookie 會被立刻刪除。
• 路徑：指定域中的那個路徑，應該想服務器發送 cookie，/ 表示沒有限制
• 安全標志：指定以后，cookie 只有在使用 SSL 連接的時候才可以發送到服務器。

chrome 的實際截圖如： 

cookie 的管理

cookie 可以通過服務器端返回響應頭Set-Cookie: <cookie名>=<cookie值>來修改瀏覽器的端的 cookie，當然這個就不展開了，每種后台語言都很容易處理。

客戶端處理 cookie，可以用原生的 js 來控制，另外也可以通過js-cookie插件。

添加 cookie

引入腳本

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

添加 cookie

// Create a cookie, valid across the entire site: Cookies.set('name', 'value'); // Create a cookie that expires 7 days from now, valid across the entire site: Cookies.set('name', 'value', { expires: 7 }); // Create an expiring cookie, valid to the path of the current page: Cookies.set('name', 'value', { expires: 7, path: '' });

讀取 cookie

讀取具名的 cookie

Cookies.get('name'); // => 'value' Cookies.get('nothing'); // => undefined

讀取所有的 cookie

Cookies.get(); // => { name: 'value' }

移除 cookie

Cookies.set('name', 'value', { path: '' }); Cookies.remove('name'); // fail! Cookies.remove('name', { path: '' }); // removed!

json 數據

Cookies.set('name', { foo: 'bar' }); Cookies.get('name'); // => '{"foo":"bar"}' Cookies.get(); // => { name: '{"foo":"bar"}' } Cookies.getJSON('name'); // => { foo: 'bar' } Cookies.getJSON(); // => { name: { foo: 'bar' }

設置過期時間

Cookies.set('name', 'value', { expires: 365 }); Cookies.get('name'); // => 'value' Cookies.remove('name');

設置路徑

Cookies.set('name', 'value', { path: '' }); Cookies.get('name'); // => 'value' Cookies.remove('name', { path: '' });

設置 domain

Cookies.set('name', 'value', { domain: 'subdomain.site.com' }); Cookies.get('name'); // => undefined (need to read at 'subdomain.site.com')

cookie 的相關限制

• IE6 以及更低版本限制每個域名最多 20 個 cookie
• IE7 之后的版本每個域名最多 50 個。
• Firefox 限制每個與最多 50 個 cookie（未確認）
• Safari 和 Chrome 對於每個域的 cookie 數量限制沒有硬性規定。
• 大多數瀏覽器 4096B 的長度限制，為了兼容多種瀏覽器，最好將長度限制在 4095B 以內.
• 每個 domain 最多只能有 20 條 cookie
• cookie 會隨着 http 請求發送到后台，增加了額外的請求流量

總結

已經被淘汰的東西了，請使用 Web storage API （本地存儲和會話存儲）或 IndexedDB