mona
WebDevHub

浏览器存储全指南

Web 浏览器提供了多种存储数据的方式，每种都有不同的用途和特点。

Cookies

设置和读取

// 设置 Cookie
document.cookie = 'username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/';

// 读取 Cookie
console.log(document.cookie); // "username=John; session=xyz"

特点

  • 有过期时间
  • 可设置路径和域名
  • 大小限制约 4KB
  • 每次请求都会发送到服务器

LocalStorage

基本操作

// 存储
localStorage.setItem('name', 'John');
localStorage.setItem('user', JSON.stringify({ id: 1, email: 'john@example.com' }));

// 读取
const name = localStorage.getItem('name');
const user = JSON.parse(localStorage.getItem('user'));

// 删除
localStorage.removeItem('name');

// 清空所有
localStorage.clear();

特点

  • 持久化存储（除非手动清除）
  • 容量约 5-10MB
  • 仅客户端访问
  • 不随请求发送

SessionStorage

基本操作

// 用法与 LocalStorage 相同
sessionStorage.setItem('session', 'abc123');
const session = sessionStorage.getItem('session');

特点

  • 仅在当前会话有效
  • 标签页关闭后清除
  • 容量约 5-10MB

IndexedDB

基本使用

// 打开数据库
const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('email', 'email', { unique: true });
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // 添加数据
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'John', email: 'john@example.com' });

  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = function() {
    console.log(getRequest.result);
  };
};

特点

  • 异步操作
  • 支持事务
  • 大容量存储
  • 存储结构化数据

存储方式对比

方式容量过期时间随请求发送
Cookies~4KB可设置✅
LocalStorage~5-10MB永久❌
SessionStorage~5-10MB会话❌
IndexedDB~50MB+永久❌

选择建议

  • Cookies - 需要发送到服务器的数据
  • LocalStorage - 简单的键值对存储
  • SessionStorage - 临时会话数据
  • IndexedDB - 大量结构化数据

更多详情请参考 MDN Web Storage API