HTML 本地存储：把数据留在浏览器，随用随取的全解

一句话：本地存储就是「浏览器的 U 盘」，不用装数据库，刷新页面、关标签页数据都还在。下面带你 15 分钟搞懂 localStorage / sessionStorage / IndexedDB 该用谁、怎么用、怎么不踩坑。

1. 先选对工具：3 兄弟速览

小数据优先 localStorage，大量或结构化数据再上 IndexedDB。

2. localStorage 四板斧：增读删改一行搞定

// 写
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({id: 1, name: '张三'}));

// 读
const theme = localStorage.getItem('theme');        // 'dark'
const user  = JSON.parse(localStorage.getItem('user')); // {id:1,name:'张三'}

// 删单条
localStorage.removeItem('theme');

// 全清空
localStorage.clear();

• 只能存 字符串，对象/数组先 JSON.stringify。
• 键值对形式，同源策略 隔离：a.com 读不到 b.com 数据。

3. sessionStorage：标签页级别的「临时便签」

// 页面 A：填写表单时随时备份
window.addEventListener('input', e => {
  sessionStorage.setItem('draft', e.target.value);
});

// 页面 A 刷新后：读出来继续写
window.addEventListener('DOMContentLoaded', () => {
  const draft = sessionStorage.getItem('draft');
  if (draft) document.querySelector('#post').value = draft;
});

关闭标签页数据自动消失，用户无需清垃圾，适合「秒回」体验。

4. 事件监听：跨标签页同步数据

window.addEventListener('storage', e => {
  // 触发于「其它页」修改同域 storage
  if (e.key === 'theme') {
    document.body.className = e.newValue; // 立即换肤
  }
});

• 仅限 localStorage；本页修改不会触发自己。
• 利用它可实现「多标签页状态同步」（购物车、主题切换）。

5. IndexedDB 极速上手（异步大仓库）

// 1. 打开/创建数据库
const open = indexedDB.open('AppDB', 1);

open.onupgradeneeded = e => {
  const db = e.target.result;
  // 创建对象仓库（类似表）
  if (!db.objectStoreNames.contains('files')) {
    db.createObjectStore('files', { keyPath: 'id', autoIncrement: true });
  }
};

open.onsuccess = e => {
  const db = e.target.result;

  // 2. 写入
  const tx = db.transaction('files', 'readwrite');
  const store = tx.objectStore('files');
  store.add({ name: 'report.pdf', blob: fileBlob });

  // 3. 读取
  const get = store.get(1);
  get.onsuccess = () => console.log(get.result);
};

• 支持 事务、索引、游标 = 小型数据库。
• 存 Blob、File、ArrayBuffer 无压力 → 离线视频、PDF 都 OK。

6. 容量 & 异常处理

代码兜底：

try { localStorage.setItem('big', bigString); }
catch (e) {
  if (e.name === 'QuotaExceededError') {
    alert('本地空间已满，请清理缓存');
  }
}

7. 安全与隐私小贴士

1. 绝不存敏感明文（密码、token），可存加密后字符串。
2. HTTPS 站点数据更难被中间人窃听。
3. 用户一键清缓存 → 代码要做好「空值」回退。
4. IndexedDB 大容量需用户授权，首次使用弹窗提示。

8. 实战：10 行代码实现「深色模式记忆」

<button id="toggle">🌗 切换主题</button>
<script>
const btn = document.getElementById('toggle');
const html = document.documentElement;

// 页面加载读上一次设置
const saved = localStorage.getItem('theme');
if (saved) html.className = saved;

btn.onclick = () => {
  const next = html.className === 'dark' ? '' : 'dark';
  html.className = next;
  localStorage.setItem('theme', next);
};
</script>

刷新、重开浏览器依旧记住用户选择，零后端参与。

9. 一句话口诀（背完走天下）

“小数据 localStorage，会话级 sessionStorage，大文件 IndexedDB；
只能字符串，对象要 stringify；
storage 事件跨页同步，QuotaExceededError 要捕获。”

掌握 3 个 API + 1 个事件，你的网页就拥有「离线数据库」级别的体验，还不快试试！