cookie 詳解

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