cookie、session、localStorage分別是什麼？有什麼作用？

本文為飢人谷原創文章，首發於 前端學習指南。

一、cookie

1. cookie是存儲在瀏覽器上的一小段數據，用來記錄某些當頁面關閉或者刷新後仍然需要記錄的信息。在控制台用 「document.cookie」查看你當前正在瀏覽的網站的cookie。

2. cookie可以使用 js 在瀏覽器直接設置（用於記錄不敏感信息，如用戶名）, 也可以在服務端通使用 HTTP 協議規定的 set-cookie 來讓瀏覽器種下cookie，這是最常見的做法。（打開一個網站，清除全部cookie，然後刷新頁面，在network的Response headers試試找一找set-cookie吧）
3. 每次網路請求 Request headers 中都會帶上cookie。所以如果 cookie 太多太大對傳輸效率會有影響。
4. 一般瀏覽器存儲cookie 最大容量為4k，所以大量數據不要存到cookie。
5. 設置cookie時的參數：

• path：表示 cookie 影響到的路徑，匹配該路徑才發送這個 cookie。expires 和 maxAge：告訴瀏覽器 cookie 時候過期，maxAge 是 cookie 多久後過期的相對時間。不設置這兩個選項時會產生 session cookie，session cookie 是 transient 的，當用戶關閉瀏覽器時，就被清除。一般用來保存 session 的 session_id。

• secure：當 secure 值為 true 時，cookie 在 HTTP 中是無效，在 HTTPS 中才有效
• httpOnly：瀏覽器不允許腳本操作 document.cookie 去更改 cookie。一般情況下都應該設置這個為 true，這樣可以避免被 xss 攻擊拿到 cookie。[cookie 參數][簡述 Cookie 是什麼]

二、session

1. 當一個用戶打開淘寶登錄後，刷新瀏覽器仍然展示登錄狀態。伺服器如何分辨這次發起請求的用戶是剛才登錄過的用戶呢？這裡就使用了session保存狀態。用戶在輸入用戶名密碼提交給服務端，服務端驗證通過後會創建一個session用於記錄用戶的相關信息，這個 session 可保存在伺服器內存中，也可保存在資料庫中。

• 創建session後，會把關聯的session_id 通過setCookie 添加到http響應頭部中。
• 瀏覽器在載入頁面時發現響應頭部有 set-cookie欄位，就把這個cookie 種到瀏覽器指定域名下。
• 當下次刷新頁面時，發送的請求會帶上這條cookie， 服務端在接收到後根據這個session_id來識別用戶。
• cookie 是存儲在瀏覽器里的一小段「數據」，而session是一種讓伺服器能識別某個用戶的「機制」，session 在實現的過程中需要使用cookie。當然有時候說到 session 也指伺服器里創建的那個和用戶身份關聯的對象。

三、localStorage

1. localStorage HTML5本地存儲web storage特性的API之一，用於將大量數據（最大5M）保存在瀏覽器中，保存後數據永遠存在不會失效過期，除非用 js手動清除。

2. 不參與網路傳輸。
3. 一般用於性能優化，可以保存圖片、js、css、html 模板、大量數據。

加飢人谷官網微信號: hungervalley ，暗號：來自知乎

每日一題，每周資源推薦，精彩博客推薦，工作、筆試、面試經驗交流解答，免費直播課，群友輕分享... ，數不盡的福利免費送