面试题库 词条目录
前端Wiki/词条/浏览器存储

浏览器存储

定义客户端持久化方案：Cookie / localStorage / sessionStorage / IndexedDB 四件套

Cookie：最古老，容量小（约 4KB），每次请求自动带上（可设 HttpOnly/Secure/SameSite），本职是身份凭证而非存储。localStorage：同源共享、持久存储（不主动删就一直在）、容量 5-10MB、同步 API。sessionStorage：同源 + 同标签页，关页即清，适合临时草稿。IndexedDB：异步 NoSQL 存储，容量数百 MB 起步，适合大量结构化数据（离线缓存、聊天记录）。

高频踩坑：localStorage 同步 API 在大读写时阻塞主线程；IndexedDB 原生 API 反人类（回调套回调），实际开发上 localForage 或 Dexie.js 封装；存储要考虑序列化（对象 JSON.stringify）与过期机制（自己存时间戳）。

JavaScript
// ---------- localStorage / sessionStorage：同步、同源 ----------
localStorage.setItem('token', 'abc');     // 持久存储
sessionStorage.setItem('draft', '...');   // 关页签即清
const t = localStorage.getItem('token');
localStorage.removeItem('token');
localStorage.clear();

// ---------- 对象存储（自己序列化） + 过期机制 ----------
const cache = {
  set(k, v, ttl) {
    localStorage.setItem(k, JSON.stringify({
      v, expire: Date.now() + ttl,
    }));
  },
  get(k) {
    const raw = localStorage.getItem(k);
    if (!raw) return null;
    const { v, expire } = JSON.parse(raw);
    return Date.now() < expire ? v : (localStorage.removeItem(k), null);
  },
};

// ---------- IndexedDB：异步海量（示例骨架） ----------
const req = indexedDB.open('myDB', 1);
req.onupgradeneeded = e =>
  e.target.result.createObjectStore('logs', { keyPath: 'id' });
req.onsuccess = e => {
  const db = e.target.result;
  db.transaction('logs').objectStore('logs')
    .add({ id: 1, text: 'hello' });   // 异步写，不阻塞渲染
};
⚠ 常见误区
🔗 相关词条XSS 与 CSRFHTTP 缓存本地存储 localStorage
← 返回来源章节浏览器存储：Cookie / localStorage / indexDB