前端開發(fā)中最常用的5種本地存儲方式總結(jié)

更新時間：2026年03月05日 08:30:00 作者：半世輪回半世尋

在前端開發(fā)中,本地存儲用于在瀏覽器中持久化或臨時存儲數(shù)據(jù),這篇文章主要介紹了前端開發(fā)中最常用的5種本地存儲方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

為什么前端需要本地存儲？

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

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

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

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

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

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

1. localStorage

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

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

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

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

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

// 清空
localStorage.clear();

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

持久性：永久，除非用戶手動清瀏覽器緩存。

優(yōu)缺點：

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

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

2. sessionStorage

跟localStorage幾乎一樣，但會話級。

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

容量：5MB左右

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

優(yōu)缺點：

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

3. IndexedDB

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

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

// 打開數(shù)據(jù)庫
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);
}

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

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

優(yōu)缺點：

優(yōu)點：異步不卡線程、支持復(fù)雜對象/Blob/文件、索引查詢、事務(wù)
缺點：原生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)缺點：

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

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

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

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

簡單實現(xiàn)（項目里常用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堆

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

優(yōu)缺點：

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

整體對比一圖概覽

維度	localStorage	sessionStorage	IndexedDB	Cache API	內(nèi)存緩存
易用性	★★★★★	★★★★★	★★☆☆☆	★★★☆☆	★★★★☆
容量	★★☆☆☆ (5MB)	★★☆☆☆	★★★★★	★★★★★	★☆☆☆☆
持久性	★★★★★	★☆☆☆☆	★★★★★	★★★★☆	★☆☆☆☆
性能	★★★☆☆	★★★☆☆	★★★★☆	★★★★★	★★★★★
結(jié)構(gòu)化支持	★☆☆☆☆	★☆☆☆☆	★★★★★	★★☆☆☆	★★★★☆
適用規(guī)模	小配置	臨時會話	中大型離線	資源/PWA	頁面內(nèi)臨時