一、核心特性對比

二、API使用示例

1. Cookie操作

// 設置Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";// 讀取Cookie
function getCookie(name) {const value = `; ${document.cookie}`;const parts = value.split(`; ${name}=`);if (parts.length === 2) return parts.pop().split(';').shift();
}// 刪除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

2. localStorage操作

// 存儲數據
localStorage.setItem('theme', 'dark');// 讀取數據
const theme = localStorage.getItem('theme');// 刪除數據
localStorage.removeItem('theme');// 清空所有
localStorage.clear();

3. sessionStorage操作

// 存儲數據
sessionStorage.setItem('sessionId', 'abc123');// 讀取數據
const sessionId = sessionStorage.getItem('sessionId');// 刪除數據
sessionStorage.removeItem('sessionId');// 清空當前會話存儲
sessionStorage.clear();

三、使用場景推薦

1. Cookie適用場景

• 用戶身份認證：存儲Session ID

• 跟蹤用戶行為：分析用戶訪問路徑

• 個性化設置：保存語言、地區偏好（需要服務器訪問時）

2. localStorage適用場景

• 長期用戶設置：主題、字體大小等偏好

• 離線應用數據：緩存應用數據供離線使用

• 不敏感數據存儲：如閱讀進度、應用狀態

3. sessionStorage適用場景

• 表單數據暫存：防止頁面意外關閉丟失數據

• 單頁應用狀態：存儲當前會話的臨時狀態

• 敏感數據臨時存儲：如支付流程中的臨時令牌

四、安全最佳實踐

1. Cookie安全：

   • 始終使用Secure標志（僅HTTPS）

   • 敏感Cookie設置HttpOnly（防XSS）

   • 設置SameSite=Strict或Lax（防CSRF）

   • 限制Cookie作用域（Domain和Path）

2. Web存儲安全：

   • 避免存儲敏感信息（令牌、密碼等）

   • 對存儲的數據進行加密

   • 實施內容安全策略（CSP）

   • 定期清理不再需要的數據

3. 通用原則：

   • 最小化存儲數據量

   • 設置合理的過期時間

   • 提供用戶控制選項（清除數據）

   • 使用子資源完整性（SRI）防止惡意腳本