HTML5 LocalStorage 核心優勢與兼容性方案：不只是「大號 Cookie」

許多開發者誤以為 localStorage 僅是「容量更大的 Cookie」。本文揭示其本質差異、核心優勢、適用場景，並提供低版本瀏覽器兼容方案。

核心差異：網絡傳輸與存儲隔離

關鍵優勢：localStorage **不隨 HTTP 請求自動發送**，極大節省頻寬，避免 Cookie 污染靜態資源域名優化。

適用場景（Cookie 難勝任）

1. 大量客戶端狀態：草稿箱、編輯器內容、偏好設置（主題、字體大小）。
2. 離線數據緩存：PWA 應用缓存列表數據、圖片 Base64、地圖瓦片。
3. 跨標籤頁通信：配合 storage 事件實現多標籤同步狀態。
4. 減少服務器壓力：Token、用戶配置本地存，無需每請求攜帶。

兼容性方案：Polyfill 策略

IE 6/7 不支持 localStorage，可用 userData 行為模擬：

<!--[if lte IE 7]>
<script>
var localStorage = {
    _elem: document.createElement('div'),
    _init: function() {
        this._elem.style.display = 'none';
        this._elem.addBehavior('#default#userData');
        document.body.appendChild(this._elem);
        this._elem.load('localStorage');
    },
    getItem: function(key) { this._init(); return this._elem.getAttribute(key); },
    setItem: function(key, val) { this._init(); this._elem.setAttribute(key, val); this._elem.save('localStorage'); },
    removeItem: function(key) { this._init(); this._elem.removeAttribute(key); this._elem.save('localStorage'); }
};
</script>
<![endif]-->

或引入成熟 Polyfill：localStorage-polyfill、store.js。

最佳實踐提醒

• 同步 API 會阻塞主線程，大量讀寫請用 IndexedDB 或 Web Worker。
• 隱私模式下 localStorage 可能拋異常，需 try-catch 保護。
• 敏感數據（Token、PII）**切勿**明文存儲，需加密。

正確認知 localStorage 定位，釋放其真正價值。