浏览器存储：从Cookie到IndexedDB

当你开发的图片编辑器保存大文件时，突然弹窗提示"存储空间不足"------这就是前端存储选型不当的代价。

一、浏览器存储全景图：4大存储方案对比

graph LR A[浏览器存储] --> B[短期缓存] A --> C[持久化存储] B --> D[Cookie
4KB] B --> E[sessionStorage
5MB] C --> F[localStorage
5-10MB] C --> G[IndexedDB
最大可达磁盘80%]

1. Cookie：网络时代的身份证（1997）

• 特点：随请求发送、4KB上限、可设过期时间
• 经典场景：用户登录态保持

// 设置登录凭证
document.cookie = `token=abcd1234; max-age=3600; path=/; Secure`;

// 痛点：存储大文件？别想了！

2. Web Storage：简易键值对（2009）

• localStorage：持久存储（5-10MB）
• sessionStorage：会话级存储（标签页关闭即销毁）

// 存储用户主题配置
localStorage.setItem('theme', JSON.stringify({
  darkMode: true,
  fontSize: 16
}));

// 致命缺陷：无法存储二进制文件

3. IndexedDB：前端数据库（2010）

• 核心优势 ：
  • 存储结构：NoSQL键值对 + 索引
  • 容量上限：可达磁盘80%存储空间（Chrome允许单条记录超100MB）
  • 数据类型：支持JS对象、ArrayBuffer、Blob等
• 适用场景 ：
  • 离线应用数据缓存
  • 音视频文件编辑
  • 大型游戏资源包

实测数据：在Chrome 105中，IndexedDB存储200MB视频文件无压力，而localStorage超过5MB即报错

二、IndexedDB突破存储限制

1. 存储空间如何计算？

浏览器采用动态配额机制：

pie title 浏览器磁盘分配策略 "IndexedDB" : 80 "其他存储": 10 "系统保留" : 10

• 具体实现 ：
  • Chrome/Edge：可用磁盘空间 * 80% / 源数量
  • Safari：默认1GB，可申请更多
  • Firefox：动态调整，单库可达2GB

当用户访问你的PWA图库时，浏览器可能分配500MB空间，而游戏网站可能分配到2GB

2. 二进制存储实战：视频编辑器案例

// 从文件输入框获取视频
const videoFile = document.getElementById('video-upload').files[0];

// 创建数据库事务
const tx = db.transaction('videos', 'readwrite');
const store = tx.objectStore('videos');

// 将视频转为Blob存入
store.put({
  id: Date.now(),
  name: 'demo.mp4',
  data: new Blob([videoFile], { type: 'video/mp4' }) // 关键！
});

// 读取并播放
store.get(1).onsuccess = e => {
  const videoBlob = e.target.result.data;
  const videoUrl = URL.createObjectURL(videoBlob);
  document.getElementById('player').src = videoUrl;
};

优势 ：Blob存储视频可直接作为<video>源，无需Base64转换

3. 突破限制的三大策略

1. 分片存储

// 将大文件切割成10MB分片
const CHUNK_SIZE = 10 * 1024 * 1024;
for (let i = 0; i < file.size; i += CHUNK_SIZE) {
  const chunk = file.slice(i, i + CHUNK_SIZE);
  store.put({ fileId: 'video1', index: i, chunk });
}

2. 智能驱逐策略

// 定期清理旧数据
const clearOldData = async () => {
  const tx = db.transaction('cache', 'readwrite');
  const index = tx.objectStore('cache').index('lastAccessed');
  let cursor = await index.openCursor(null, 'prev');
  
  while ((await cursor.advance(100)) && dbSize > quota * 0.8) {
    cursor.delete(); // 删除最早访问的记录
    dbSize -= cursor.value.size;
  }
};

3. 容量预检机制

// 检查剩余空间
navigator.storage.estimate().then(estimate => {
  const usedMB = estimate.usage / 1024 / 1024;
  const quotaMB = estimate.quota / 1024 / 1024;
  console.log(`已用空间：${usedMB.toFixed(1)}MB / 总配额：${quotaMB.toFixed(1)}MB`);
});

三、避坑指南

1. 浏览器差异处理方案

浏览器	默认限制	扩容方案
Chrome	磁盘80%	自动管理无需干预
Safari	1GB	申请额外空间：navigator.webkitPersistentStorage.requestQuota
Firefox	动态调整	监听quota-exceeded事件
Edge	同Chrome	使用StorageManager API

2. 事务原子性保障

// 转账事务：要么全成功要么全失败
const transfer = (fromId, toId, amount) => {
  return new Promise((resolve, reject) => {
    const tx = db.transaction('accounts', 'readwrite');
    
    tx.oncomplete = resolve;
    tx.onerror = () => reject(tx.error);
    
    const store = tx.objectStore('accounts');
    store.get(fromId).onsuccess = e => {
      const from = e.target.result;
      if (from.balance < amount) {
        reject('余额不足');
        tx.abort(); // 显式终止事务
        return;
      }
      
      store.get(toId).onsuccess = e => {
        const to = e.target.result;
        store.put({ ...from, balance: from.balance - amount });
        store.put({ ...to, balance: to.balance + amount });
      };
    };
  });
};

教训：某金融应用因未处理事务回滚，导致用户余额出现负值

3. 性能调优技巧

• 索引优化 ：为查询字段创建索引

  store.createIndex('by_createDate', 'createDate', { unique: false });

• 批量写入 ：使用IDBObjectStore.add批量操作减少事务开销

• 游标分页 ：避免全量加载

  let count = 0;
  store.openCursor().onsuccess = e => {
    const cursor = e.target.result;
    if (count++ >= 100) return;
    // 处理单条数据
    cursor.continue();
  };

四、未来趋势：存储技术新方向

1. OPFS（Origin Private File System）

// 创建私有文件系统
const root = await navigator.storage.getDirectory();
const file = await root.getFileHandle('video.mp4', { create: true });
const writer = await file.createWritable();
await writer.write(videoBlob);

优势：文件系统级API，读写性能提升300%

2. WebAssembly加速

// 使用Rust编译Wasm处理视频
import init, { encode_video } from './pkg/video_encoder.js';

init().then(() => {
  const wasmBuffer = encode_video(rawVideoData); // 5倍于JS的编码效率
  store.put({ id: 'processed', data: wasmBuffer });
});

小结

1. 小数据：localStorage（用户配置/令牌）
2. 会话数据：sessionStorage（表单草稿）
3. 结构化数据：IndexedDB（复杂对象）
4. 大型媒体文件：IndexedDB Blob存储

永远在后端进行二次验证！前端存储数据可被用户直接修改（Chrome控制台 -> Application -> IndexedDB 可任意修改数据）