最近項(xiàng)目里又在反復(fù)糾結(jié)本地?cái)?shù)據(jù)怎么存最合適，就想把前端日常最常碰的幾種存儲(chǔ)方式捋一遍。

為什么前端需要本地存儲(chǔ)？

簡(jiǎn)單說(shuō)：提升性能、支持離線、記住用戶偏好、減少服務(wù)器壓力。

比如列表頁(yè)用戶翻了好幾頁(yè)，下次進(jìn)來(lái)還想看到上次位置和篩選；PWA沒網(wǎng)也能看點(diǎn)內(nèi)容；主題暗黑模式、字體大小這些小東西，不想每次請(qǐng)求接口。

服務(wù)器傳太慢，內(nèi)存關(guān)頁(yè)就丟，本地存儲(chǔ)就成了日常標(biāo)配。

優(yōu)秀的前端本地存儲(chǔ)該有哪些特性？（參考后端思路，我覺得前端也差不多）

• 容量夠用（別5MB就爆）
• 持久性（關(guān)瀏覽器還能剩多少）
• 性能（讀寫快不快，同步/異步）
• 易用性（API友好不）
• 跨標(biāo)簽共享（多標(biāo)簽?zāi)懿荒芡剑?/li>
• 結(jié)構(gòu)化支持（對(duì)象、數(shù)組、Blob、大文件行不行）
• 安全性（同源、隱私模式）

基于這些，2026年現(xiàn)在前端項(xiàng)目里，我最常用來(lái)存的其實(shí)就這5種（從簡(jiǎn)單到復(fù)雜排）：

1. localStorage

最基礎(chǔ)、最常用，幾乎每個(gè)項(xiàng)目都逃不開。

怎么用（大家都知道，但還是貼代碼）：

// 存
localStorage.setItem('userTheme', 'dark');

// 取
const theme = localStorage.getItem('userTheme');

// 刪
localStorage.removeItem('userTheme');

// 清空
localStorage.clear();

容量：一般5MB左右（Chrome、Safari、Firefox差不多）

持久性：永久，除非用戶手動(dòng)清瀏覽器緩存。

優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：API極簡(jiǎn)，同步操作，跨標(biāo)簽共享（改一個(gè)，其他標(biāo)簽?zāi)芡ㄟ^storage事件監(jiān)聽到）
• 缺點(diǎn)：只能存字符串（對(duì)象要JSON.stringify），同步大點(diǎn)數(shù)據(jù)會(huì)卡主線程，隱私模式下可能被清，iOS Safari有時(shí)莫名其妙丟數(shù)據(jù)

真實(shí)場(chǎng)景：用戶設(shè)置（主題、側(cè)邊欄狀態(tài)）、token應(yīng)急存、簡(jiǎn)單購(gòu)物車草稿

2. sessionStorage

跟localStorage幾乎一樣，但會(huì)話級(jí)。

代碼：把localStorage換成sessionStorage就行，用法一模一樣。

容量：5MB左右

持久性：標(biāo)簽頁(yè)關(guān)了就沒了（同窗口新tab共享）

優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：臨時(shí)數(shù)據(jù)不污染長(zhǎng)期，安全性稍好（自動(dòng)銷毀）
• 缺點(diǎn)：不能跨標(biāo)簽持久共享

3. IndexedDB

大容量、結(jié)構(gòu)化數(shù)據(jù)的王者，PWA/離線必備，現(xiàn)在中大型項(xiàng)目越來(lái)越多往這兒搬。

基本用法（原生API啰嗦，實(shí)際我基本用dexie.js或idb封裝，這里先貼原生）：

// 打開數(shù)據(jù)庫(kù)
const request = indexedDB.open('myAppDB', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // 操作...
};

// 存數(shù)據(jù)（事務(wù)）
function addTodo(todo) {
  const tx = db.transaction('todos', 'readwrite');
  const store = tx.objectStore('todos');
  store.add(todo);
}

容量：很大，通常幾百M(fèi)B到GB（視磁盤空間，瀏覽器配額管理，遠(yuǎn)超5MB）

持久性：永久，但空間緊張時(shí)瀏覽器可能清（比localStorage難清）

優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：異步不卡線程、支持復(fù)雜對(duì)象/Blob/文件、索引查詢、事務(wù)
• 缺點(diǎn)：原生API回調(diào)地獄，學(xué)習(xí)曲線陡（推薦封裝）

4. Cache API（配合Service Worker）

資源緩存神器，PWA性能核心。

基本用法（必須在sw.js里）：

// sw.js install事件
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-app-v1').then(cache => {
      return cache.addAll([
        '/styles.css',
        '/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

// fetch攔截
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

容量：跟IndexedDB一樣，受配額管理，很大

持久性：持久，但可被瀏覽器清理

優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：專為資源設(shè)計(jì)（html/css/js/img），攔截請(qǐng)求方便，支持離線秒開
• 缺點(diǎn)：只能存Request/Response，不適合業(yè)務(wù)JSON；依賴Service Worker（https或localhost）

真實(shí)場(chǎng)景：PWA殼子、靜態(tài)資源離線、圖片懶加載備用、H5頁(yè)面緩存

5. 內(nèi)存緩存（JS對(duì)象/Map + 簡(jiǎn)單LRU）

頁(yè)面內(nèi)最快，臨時(shí)數(shù)據(jù)首選。

簡(jiǎn)單實(shí)現(xiàn)（項(xiàng)目里常用mini LRU）：

class SimpleLRU {
  constructor(max = 100) {
    this.max = max;
    this.cache = new Map();
  }
  get(key) {
    if (!this.cache.has(key)) return null;
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);
    return value;
  }
  set(key, value) {
    if (this.cache.has(key)) this.cache.delete(key);
    this.cache.set(key, value);
    if (this.cache.size > this.max) {
      const oldest = this.cache.keys().next().value;
      this.cache.delete(oldest);
    }
  }
}

// 用法
const pageCache = new SimpleLRU(50);
pageCache.set('userListPage1', data);

容量：內(nèi)存大小，取決于JS堆

持久性：頁(yè)面刷新/關(guān)閉就沒了

優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：納秒級(jí)、無(wú)序列化、最快
• 缺點(diǎn)：不持久、內(nèi)存泄漏風(fēng)險(xiǎn)

整體對(duì)比一圖概覽

最后選型建議（我自己的經(jīng)驗(yàn)）

• 簡(jiǎn)單配置、偏好 → localStorage
• 臨時(shí)表單/狀態(tài) → sessionStorage
• 大量業(yè)務(wù)數(shù)據(jù)、離線 → IndexedDB（強(qiáng)烈推dexie.js）
• PWA/靜態(tài)資源 → Cache API + Service Worker
• 頁(yè)面內(nèi)高速?gòu)?fù)用 → 內(nèi)存LRU

項(xiàng)目里我現(xiàn)在基本這么分層：小配置local，臨時(shí)session，大數(shù)據(jù)IndexedDB，資源Cache，內(nèi)存加速。

覆蓋了95%的場(chǎng)景，不會(huì)再糾結(jié)了。

總結(jié)

到此這篇關(guān)于前端開發(fā)中最常用的5種本地存儲(chǔ)方式的文章就介紹到這了,更多相關(guān)前端本地存儲(chǔ)方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論