浏览器存储

浏览器存储技术对比

小容量\n服务器通信\n过期机制

大容量\n永久存储\n同源策略

会话级存储\n标签页隔离\n同源策略

大容量数据库\n结构化查询\n异步操作

浏览器存储技术

Cookie

localStorage

sessionStorage

IndexedDB

B1

C1

D1

E1

⭐ 核心特性对比表

特性	Cookie	localStorage	sessionStorage	IndexedDB
存储容量	~4KB	~5MB	~5MB	几百MB甚至无限
生命周期	可设置过期时间	永久保存	会话期间	永久保存
作用域	同源+路径	同源	同源+标签页	同源
服务器通信	自动发送	不发送	不发送	不发送
API复杂度	简单字符串	简单键值对	简单键值对	复杂数据库操作
数据类型	字符串	字符串	字符串	几乎所有JS类型
同步/异步	同步	同步	同步	异步

详细特性解析

1️⃣ Cookie

// 设置Cookie
document.cookie = "username=张三; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/; domain=example.com; secure; SameSite=Strict";

// 读取Cookie
const cookies = document.cookie.split('; ');
const username = cookies.find(cookie => cookie.startsWith('username=')).split('=')[1];

核心特点:

• ⏱️ 可设置过期时间（expires/max-age）
• 每次HTTP请求自动发送到服务器
• 可设置HttpOnly防止JavaScript访问
• 存储容量小（约4KB）
• ️ 可限制访问路径（path）
• 可限制访问域名（domain）
• 可设置安全标志（secure, SameSite）

2️⃣ localStorage

// 存储数据
localStorage.setItem('userPreferences', JSON.stringify({
  theme: 'dark',
  fontSize: 'large'
}));

// 读取数据
const preferences = JSON.parse(localStorage.getItem('userPreferences'));

// 删除数据
localStorage.removeItem('userPreferences');

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

核心特点:

• 除非手动清除，否则永久存在
• 较大存储容量（约5MB）
• 同源策略限制（协议+域名+端口）
• 不随HTTP请求发送到服务器
• 同一源下所有标签页/窗口共享数据
• 同步API操作（可能阻塞主线程）

3️⃣ sessionStorage

// 存储数据
sessionStorage.setItem('currentSearch', '手机');

// 读取数据
const searchTerm = sessionStorage.getItem('currentSearch');

// 删除数据
sessionStorage.removeItem('currentSearch');

// 清空所有数据
sessionStorage.clear();

核心特点:

• ⏳ 仅在会话期间有效（关闭标签页即失效）
• 较大存储容量（约5MB）
• ️ 标签页隔离（不同标签页不共享）
• 同源策略限制
• 不随HTTP请求发送到服务器
• 同步API操作

4️⃣ IndexedDB

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

// 创建对象仓库
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

// 添加数据
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: '张三', age: 25, email: '[email protected]' });
  
  transaction.oncomplete = function() {
    console.log('数据添加成功');
  };
};

// 查询数据
function getUser(id) {
  const db = // 获取数据库连接
  const transaction = db.transaction(['users']);
  const store = transaction.objectStore('users');
  const request = store.get(id);
  
  request.onsuccess = function(event) {
    console.log('查询结果:', request.result);
  };
}

核心特点:

• 支持结构化数据存储（类似NoSQL数据库）
• 超大存储容量（几百MB甚至更多）
• 支持索引和高级查询
• 异步API设计（不阻塞主线程）
• 同源策略限制
• 事务机制确保数据完整性
• 支持离线存储和同步

适用场景对比

认证信息
少量数据

用户偏好
需永久保存

临时数据
仅会话期间

大量结构化数据
离线应用

选择存储技术

存储什么数据?

Cookie

localStorage

sessionStorage

IndexedDB

最佳应用场景

Cookie适合:

• 需要服务器读取的身份验证信息
• 需要在请求间持久保存的少量数据
• 需要设置过期时间的数据

localStorage适合:

• 用户首选项和设置
• 购物车内容
• 较大的持久性本地数据
• 不需要发送到服务器的数据

sessionStorage适合:

• 单次表单填写数据
• 临时会话状态
• 页面间传递一次性数据
• 需标签页隔离的数据

IndexedDB适合:

• 大量结构化数据存储
• 离线Web应用
• 需要索引和高级查询的数据
• 文件或Blob存储

趣味记忆法

Cookie 就像身份证:

• 随身携带(请求都带着)
• 容量小(只存必要信息)
• 有有效期(可设置过期)
• 特定场合使用(domain/path限制)

localStorage 就像家里的柜子:

• 永久存在(除非主动清理)
• 家人共享(同源窗口共享)
• 不会带出门(不随请求发送)
• 存储空间较大

sessionStorage 就像口袋:

• 临时存放(会话结束即清空)
• 个人专属(不同标签页不共享)
• 随手可取(简单API)

IndexedDB 就像个人数据库:

• 海量存储(容量大)
• 分类整理(索引和结构化)
• 操作复杂(需要特定方法)
• 性能强大(支持复杂查询)

存储技术比较示例

同样存储用户信息的不同方式

使用Cookie:

// 存储
document.cookie = "userId=12345; max-age=86400; path=/";
document.cookie = "username=张三; max-age=86400; path=/";

// 读取
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  const cookie = cookies.find(c => c.startsWith(name + '='));
  return cookie ? cookie.split('=')[1] : null;
}
const userId = getCookie('userId');

使用localStorage:

// 存储
const user = {
  id: 12345,
  name: '张三',
  preferences: { theme: 'dark' }
};
localStorage.setItem('user', JSON.stringify(user));

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

使用sessionStorage:

// 存储 - 仅会话期间有效
sessionStorage.setItem('currentUser', JSON.stringify({
  id: 12345,
  name: '张三',
  loginTime: new Date().toISOString()
}));

// 读取
const currentUser = JSON.parse(sessionStorage.getItem('currentUser'));

使用IndexedDB:

// 数据库操作封装
const userDB = {
  db: null,
  
  open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open('UserDatabase', 1);
      
      request.onupgradeneeded = e => {
        const db = e.target.result;
        if (!db.objectStoreNames.contains('users')) {
          db.createObjectStore('users', { keyPath: 'id' });
        }
      };
      
      request.onsuccess = e => {
        this.db = e.target.result;
        resolve(this.db);
      };
      
      request.onerror = e => reject(e.target.error);
    });
  },
  
  saveUser(user) {
    return this.open().then(db => {
      return new Promise((resolve, reject) => {
        const tx = db.transaction('users', 'readwrite');
        const store = tx.objectStore('users');
        store.put(user);
        tx.oncomplete = () => resolve(user);
        tx.onerror = e => reject(e.target.error);
      });
    });
  }
};

// 使用
userDB.saveUser({
  id: 12345,
  name: '张三',
  email: '[email protected]',
  orders: [
    { id: 'order1', items: ['商品1', '商品2'] }
  ]
});

总结与选择指南

• ⚠️ 安全考虑: 敏感数据不要存储在客户端，如需存储使用Cookie并设置HttpOnly
• 性能考虑: localStorage/sessionStorage操作简单但同步可能阻塞，大量数据操作使用IndexedDB
• 兼容性考虑: Cookie支持度最广，localStorage/sessionStorage次之，IndexedDB较新
• 开发复杂度: Cookie使用繁琐，Web Storage API简单，IndexedDB复杂但功能强大

不同存储技术各有优劣，应根据具体需求选择合适的存储方案！