乐闻世界logo
5月27日 22:34

Chrome 浏览器有哪些存储机制？

核心答案

Chrome 提供四种主流存储机制，按容量从小到大排列：

存储方式容量生命周期操作方式是否随请求发送
Cookie~4KB可设过期时间同步是
SessionStorage~5MB标签页关闭即清同步否
LocalStorage~5MB永久（手动清除）同步否
IndexedDB可用磁盘50%永久异步否

Cookie：最小但最忙

Cookie 每次请求自动携带到服务端，适合认证和会话管理。容量仅 4KB，可通过 HttpOnly 防 XSS、Secure 限 HTTPS、SameSite 防 CSRF。

js
document.cookie = 'token=abc; HttpOnly; Secure; SameSite=Strict; max-age=3600';

SessionStorage 与 LocalStorage：同源下的两种策略

两者都只能存字符串，API 一致：

js
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'

关键区别：SessionStorage 标签页隔离，关闭即消失，不同标签页不共享；LocalStorage 同源共享，跨标签页可读写，持久存在。

IndexedDB：大数据场景的选择

IndexedDB 是浏览器内置的事务型数据库，支持索引和游标查询，适合离线应用和大量结构化数据。

js
const req = indexedDB.open('myDB', 1);
req.onupgradeneeded = e => {
  const db = e.target.result;
  db.createObjectStore('users', { keyPath: 'id' });
};
req.onsuccess = e => {
  const db = e.target.result;
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').add({ id: 1, name: 'Tom' });
};

异步 API 不阻塞主线程，可在 Web Worker 中使用——这是 localStorage 做不到的。

追问：Storage 存满会怎样？

写入操作静默失败（不抛异常），可提前用 navigator.storage.estimate() 查询已用和可用空间。

追问：如何给 localStorage 加过期时间？

localStorage 本身不支持，需要手动封装：存储时附带时间戳，读取时校验是否过期并清除。

js
function setWithExpiry(key, value, ttl) {
  const item = { value, expiry: Date.now() + ttl };
  localStorage.setItem(key, JSON.stringify(item));
}
function getWithExpiry(key) {
  const raw = localStorage.getItem(key);
  if (!raw) return null;
  const item = JSON.parse(raw);
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

实际项目中推荐用 localstorage-ttl 这类成熟库，别重复造轮子。

标签：Chrome