js indexeddb 和 localstorage 的存储空间限制

在JavaScript中，IndexedDB和localStorage的存储空间上限及超出限制时的行为存在显著差异，具体如下：

1. localStorage的存储空间上限

• 统一配额：所有浏览器均限制同一源（域名）下localStorage的存储上限为5MB。这一限制包含localStorage和sessionStorage的总和（合计约10MB）。
• 超出限制的行为：当存储数据超过5MB时，浏览器会直接抛出QuotaExceededError异常，导致写入操作失败。例如：

  try {
    localStorage.setItem('largeData', new Array(10 * 1024 * 1024).join('x')); // 尝试存储10MB数据
  } catch (e) {
    console.error('存储失败:', e.name); // 输出: QuotaExceededError
  }
  

2. IndexedDB的存储空间上限

• 浏览器差异：
  • IE：固定上限为250MB。
  • Chrome/Opera：基于剩余磁盘空间的百分比（通常为剩余空间的20%，但具体比例可能因浏览器版本而异）。
  • Firefox：无硬性上限，但受浏览器全局存储配额限制（通常为硬盘可用空间的50%，且每个主域名组最多占用20%）。
  • 移动端：部分浏览器可能限制IndexedDB的存储上限为5MB（与localStorage相同）。
• 全局与组配额：
  • 全局限制：浏览器总存储空间通常为硬盘可用空间的50%（如500GB硬盘最多存储250GB）。
  • 组限制：每个主域名（如example.com）及其子域名（如www.example.com）共享一个存储组，最多占用全局限制的20%（如250GB的20%为50GB），但最少不低于10MB、最多不超过2GB。
• 超出限制的行为：
  • 若存储操作超出源的配额，浏览器会抛出QuotaExceededError异常。
  • 若浏览器全局存储空间已满，会自动删除部分网站的数据（整个网站的数据会被清空，而非部分数据）以腾出空间。

3. 关键对比与建议

4. 开发建议

• 检测存储空间：使用navigator.storage.estimate()方法获取当前源的预估已用空间和可用空间，避免盲目写入导致异常。

  navigator.storage.estimate().then(estimate => {
    console.log(`已用空间: ${estimate.usage} bytes, 可用空间: ${estimate.quota - estimate.usage} bytes`);
  });
  

• 异常处理：用try...catch包裹存储操作代码，捕获QuotaExceededError异常并提示用户清理缓存。

  try {
    const request = indexedDB.open('myDB', 1);
    request.onsuccess = () => {
      const db = request.result;
      // 执行存储操作...
    };
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      alert('本地空间不足，请清理浏览器缓存后重试。');
    }
  }
  

• 选择存储方案：
  • 若需存储少量简单数据（如Token、用户设置），优先使用localStorage。
  • 若需存储大量结构化数据或二进制资源（如图片、视频），选择IndexedDB。