【計算機網絡】前端基礎知識Cookie、localStorage、sessionStorage 以及 Token

一、先搞懂：為什么需要這些“存儲工具”？

網頁是“無狀態”的——比如你登錄一個網站，瀏覽器和服務器每次通信都是獨立的，服務器默認記不住你是誰。為了讓服務器“記住”用戶狀態（比如登錄狀態、購物車內容），或者讓瀏覽器自己保存一些數據（比如用戶偏好），就需要各種存儲技術。

二、四大核心技術對比表

特性	Cookie	localStorage	sessionStorage	Token（令牌）
本質	服務器發送給瀏覽器的小文本文件	瀏覽器本地存儲（無服務器參與）	瀏覽器本地存儲（無服務器參與）	服務器生成的字符串（通常存在 Cookie 或 Storage 中）
存儲大小	很小（約 4KB）	較大（5-10MB）	較大（5-10MB）	大小取決于類型（JWT 通常幾百字節）
生命周期	可設置過期時間（如 7 天），默認關閉瀏覽器失效	永久存儲，除非手動刪除	僅當前標簽頁會話有效	通常有過期時間（如 2 小時）
與服務器交互	每次請求自動發送給服務器	不自動發送，需手動處理	不自動發送，需手動處理	需手動添加到請求頭（如 `Authorization`）
安全性	可設置 `HttpOnly`（防 JS 讀取）、`Secure`（僅 HTTPS 發送）	明文存儲，JS 可直接讀取	明文存儲，JS 可直接讀取	需妥善保管，泄露會有安全風險
典型用途	身份識別（如登錄狀態）、記住密碼	保存用戶偏好（如主題、語言）	臨時緩存（如表單草稿）	API 接口身份驗證（替代 Cookie 無狀態驗證）

在這里插入圖片描述

sessionStorage 里存儲的是鍵值對數據，其中可能有 token，但不代表 sessionStorage 里所有內容都叫 token
auth_token里存的是后端返回的jwt數據

這里我之所以把jwt的認證數據放到sessionstorage里，而不是cookies，是因為基于 localhost 本地服務 + 多標簽頁共享認證 的場景，選擇 sessionStorage，

用開發一個本地的多用戶登錄同一域名的情況來解釋

比如說我為localhost:8080/merchant配置了一個商家登錄頁，我登陸之后，想要在新開一個標簽頁，登錄另一個商家，在嘗試后發現，頁面回到了之前登陸的地方，這里體現了 localStorage的特性

localStorage 的特性

localStorage 的特點是在同一域名下（這里是 localhost:8080 ），所有標簽頁都能訪問和修改相同的數據。當你在一個標簽頁登錄，使用 localStorage 存儲登錄信息（比如用戶 ID、JWT 等），然后在另一個標簽頁再次登錄時，新的登錄信息寫入 localStorage，就會覆蓋掉之前存儲的內容，從而導致之前的登錄狀態丟失。

sessionStorage 的方案分析

標簽頁隔離：sessionStorage 只在當前標簽頁有效，不同標簽頁之間的 sessionStorage 數據是相互獨立的，這樣可以避免不同標簽頁登錄狀態相互干擾，每個標簽頁可以保持各自的登錄狀態，滿足你登錄多個商家，且每個頁面獨立維護登錄態的需求。

Cookie 的方案分析

自動發送：Cookie 會在每次 HTTP 請求時自動被發送到服務器，無需前端手動處理傳遞登錄憑證的操作，對于后端驗證登錄狀態非常方便。
安全性可配置：可以設置 HttpOnly 屬性，使得 JavaScript 無法讀取 Cookie 內容，大大降低了 XSS 攻擊時登錄憑證被盜取的風險；設置 SameSite 屬性，可以有效防御跨站請求偽造（CSRF）攻擊；設置 Secure 屬性后，Cookie 只會在 HTTPS 連接下發送（雖然你當前是 HTTP 環境，但后續如果切換到 HTTPS ，這個屬性會增強安全性）。
跨標簽頁共享：在同一域名下，不同標簽頁之間可以共享 Cookie，方便統一管理登錄狀態。(顯然我要的是同一域名下，不同標簽頁區分不同用戶所以 sessionStorage 更好) 而同域 Cookie 全局共享

三、逐個詳解

1. Cookie：服務器給瀏覽器的“身份證”

工作流程：
當你登錄網站時，服務器驗證通過后，會生成一個包含用戶信息的 Cookie，通過響應頭發給瀏覽器。瀏覽器會把這個 Cookie 保存起來，之后每次訪問該網站時，瀏覽器都會自動把 Cookie 放在請求頭里發給服務器，服務器通過 Cookie 就知道“你是誰”了。
舉個例子：
你登錄微信網頁版，服務器給你一個 Cookie 包含 userid=123。之后你刷新頁面，瀏覽器自動把這個 Cookie 發給服務器，服務器一看 userid=123，就知道是你，不用重新登錄。

由于 同域cookies全局共享 的特性，你后續使用網頁微信的聊天功能，加好友功能，等等，這些同一域內所有需要認證的不同路由都不需要再輸一遍賬號密碼了
關鍵設置：
- expires/max-age：設置過期時間（如 max-age=604800 表示 7 天后失效）。
- HttpOnly: true：禁止 JS 讀取 Cookie（防 XSS 攻擊，保護登錄信息）。
- Secure: true：僅在 HTTPS 連接時才發送 Cookie（更安全）。
- SameSite: Strict：限制跨站請求時不發送 Cookie（防 CSRF 攻擊）。

如何操作：
前端 JS 可以讀寫非 HttpOnly 的 Cookie：

// 寫入 Cookie（簡單方式，復雜設置需用 document.cookie 字符串拼接）
document.cookie = "username=張三; max-age=604800; path=/";// 讀取所有 Cookie（字符串形式，需自己解析）
console.log(document.cookie); // "username=張三; theme=dark"

2. localStorage：瀏覽器的“長期記事本”

特點：存了就一直有，除非用戶手動刪除（比如清除瀏覽器數據），所有同源標簽頁都能共享。
舉個例子：
你在網站設置了“深色模式”，前端用 localStorage 存 theme: "dark"。下次打開該網站，前端讀取這個值，自動顯示深色模式，不用再重新設置。

如何操作：

// 存數據
localStorage.setItem("theme", "dark");
localStorage.setItem("userPrefs", JSON.stringify({ fontSize: 16 }));// 讀數據
const theme = localStorage.getItem("theme"); // "dark"
const prefs = JSON.parse(localStorage.getItem("userPrefs"));// 刪數據
localStorage.removeItem("theme"); // 刪除單個
localStorage.clear(); // 清空所有

3. sessionStorage：瀏覽器的“臨時草稿紙”

特點：只在當前標簽頁有效，關閉標簽頁就自動刪除，不同標簽頁（即使同源）也不共享。
舉個例子：
你在填寫一個很長的表單（比如注冊信息），填到一半不小心刷新了頁面。如果前端用 sessionStorage 實時保存你的輸入，刷新后可以讀取回來，不用重新填寫。

如何操作：和 localStorage 完全一樣，只是把 localStorage 換成 sessionStorage：

sessionStorage.setItem("formDraft", JSON.stringify({ username: "張三" }));
const draft = JSON.parse(sessionStorage.getItem("formDraft"));

4. Token：API 接口的“通行證”

本質：服務器生成的一串字符串，包含用戶身份信息（如用戶 ID、過期時間），用于 API 接口的身份驗證。
工作流程：
1. 用戶登錄成功后，服務器生成 Token 并返回給前端。
2. 前端把 Token 存在 localStorage/sessionStorage 或 Cookie 里。
3. 之后調用 API 時，前端手動把 Token 放在請求頭里（如 Authorization: Bearer xxxx）。
4. 服務器驗證 Token 有效性，有效則返回數據，無效則要求重新登錄。
舉個例子：
你用手機 App 登錄某個服務，App 會保存 Token。之后你刷首頁、看消息，App 每次都會把 Token 發給服務器，證明“是已登錄的用戶”。
為什么用 Token：
比傳統 Cookie 更靈活，適合跨域場景（如前后端分離項目、App 與服務器通信）。

四、核心區別總結

是否自動發給服務器：
- Cookie：是（每次請求都帶）。
- 另外三個：否（需手動處理）。
生命周期：
- localStorage：永久（除非手動刪）。
- sessionStorage：當前標簽頁生命周期。
- Cookie/Token：可設置過期時間。
安全性：
- 敏感信息（如登錄憑證）優先用 Cookie（帶 HttpOnly） 或 Token（存在內存，不用 localStorage）。
- 非敏感信息（如用戶偏好）用 localStorage。
適用場景：
- 登錄狀態維持：Cookie（傳統網站）或 Token（前后端分離）。
- 長期保存用戶設置：localStorage。
- 臨時緩存：sessionStorage。