h5頁面實現(xiàn)本地緩存主要依賴瀏覽器提供的本地存儲技術(shù)，包括localstorage、sessionstorage和indexeddb。1. localstorage用于長期保存靜態(tài)數(shù)據(jù)，適合存儲不常變化的信息如用戶設(shè)置，最大存儲約5mb，數(shù)據(jù)不會隨頁面關(guān)閉清除；2. sessionstorage用于臨時緩存，生命周期僅限當前會話，適用于多步驟表單中的中間狀態(tài)保存；3. indexeddb適用于復雜結(jié)構(gòu)化數(shù)據(jù)的存儲和查詢，支持索引和增刪改查操作，適合大量數(shù)據(jù)場景；4. 緩存策略建議根據(jù)數(shù)據(jù)時效性決定是否緩存，結(jié)合服務端做校驗機制并定期清理老數(shù)據(jù)，從而在提升加載速度的同時避免數(shù)據(jù)過期或占用過多設(shè)備空間。
H5頁面要實現(xiàn)本地緩存功能，其實主要靠的是瀏覽器提供的本地存儲技術(shù)。這些技術(shù)能讓我們把數(shù)據(jù)保存在用戶設(shè)備上，下次打開頁面時直接讀取，減少請求、提升加載速度。常見的方案包括 localStorage、sessionStorage 和 IndexedDB。
下面從實際使用角度出發(fā)，分幾個常用場景說說怎么用好這些技術(shù)。
1. 使用 localStorage 長期保存靜態(tài)數(shù)據(jù)
localStorage 是最常用的本地緩存方式之一，適合用來存儲一些不常變化的數(shù)據(jù)，比如用戶設(shè)置、靜態(tài)配置、歷史記錄等。
- 數(shù)據(jù)不會隨頁面關(guān)閉而清除，除非手動刪除或調(diào)用 clear 方法。
- 存儲上限一般為 5MB 左右（不同瀏覽器略有差異）。
- 只能存儲字符串類型，如果需要存對象，記得先用 json.stringify 轉(zhuǎn)換。
舉個例子：
你做一個天氣類 H5 頁面，用戶查過的城市可以緩存在 localStorage 里，下次打開直接顯示最近查詢的城市列表，不需要再請求服務器。
操作方法：
// 存儲數(shù)據(jù) localStorage.setItem('lastCity', '北京'); // 讀取數(shù)據(jù) const city = localStorage.getItem('lastCity'); // 刪除數(shù)據(jù) localStorage.removeItem('lastCity');
注意：不要用來存敏感信息，因為它是明文存儲的。
2. 用 sessionStorage 做臨時緩存
和 localStorage 類似，但它的生命周期只在當前會話中有效。一旦頁面關(guān)閉，數(shù)據(jù)就會被清空。
適用場景：
- 表單填寫過程中的中間狀態(tài)
- 頁面跳轉(zhuǎn)之間傳遞數(shù)據(jù)
- 不想長期占用用戶設(shè)備空間的情況
例如，你在做一個多步驟表單頁，每一步填的內(nèi)容可以暫存在 sessionStorage 里，最后提交后再統(tǒng)一處理。
操作方式也差不多：
sessionStorage.setItem('step1Data', 'xxx'); const data = sessionStorage.getItem('step1Data');
3. 復雜數(shù)據(jù)結(jié)構(gòu)用 IndexedDB
如果緩存的數(shù)據(jù)比較復雜，比如有多個字段、需要索引、支持增刪改查，那就要用到 IndexedDB。
它是一個瀏覽器內(nèi)置的數(shù)據(jù)庫系統(tǒng)，適合大量結(jié)構(gòu)化數(shù)據(jù)的存儲和查詢，比如離線消息、文章內(nèi)容、商品列表等。
雖然 API 看起來有點復雜，但可以用一些封裝好的庫來簡化開發(fā)，比如 localForage 或者自己封裝一個簡單的工具函數(shù)。
簡單流程如下：
- 創(chuàng)建數(shù)據(jù)庫并打開連接
- 創(chuàng)建 objectStore（類似表）
- 添加/讀取/更新/刪除數(shù)據(jù)
這里就不貼完整代碼了，有興趣可以搜一下“indexeddb 入門示例”。重點是：當你的數(shù)據(jù)結(jié)構(gòu)變復雜、量變大時，才考慮用它。
4. 緩存策略建議：別亂緩存，也別不緩存
很多人一開始要么不用緩存，頁面慢；要么一股腦都緩存，結(jié)果數(shù)據(jù)舊了也不更新。所以建議：
- 對時效性要求高的數(shù)據(jù)，不緩存或設(shè)個過期時間（比如用時間戳判斷）
- 對靜態(tài)資源或低頻變動數(shù)據(jù)，優(yōu)先緩存
- 結(jié)合服務端接口，做緩存校驗機制（如 ETag、Last-Modified）
- 清理老數(shù)據(jù)，避免無限增長
比如你可以這樣設(shè)計：
每次請求數(shù)據(jù)前，先看本地有沒有緩存，有的話再檢查是否在有效期內(nèi)。超過 5 分鐘就重新拉取，否則繼續(xù)用本地數(shù)據(jù)。
基本上就這些。H5 的本地緩存不是什么高深技術(shù)，但用好了能讓用戶體驗明顯提升。關(guān)鍵在于根據(jù)業(yè)務需求選擇合適的存儲方式，并做好數(shù)據(jù)管理和清理。
