Javascript sessionStorage 和 localStorage setItem QuotaExceededError：无法在“存储”上执行“setItem”：设置的值超出了配额。

QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'MANAGER-LAYOUT-DATA' exceeded the quota.

这个错误通常发生在尝试向浏览器的存储（如 localStorage 或 sessionStorage）中存储数据时，超过了浏览器为该存储分配的配额。下面我们将详细解释这个错误的原因以及如何解决它。

1. 理解 QuotaExceededError

什么是 QuotaExceededError？

QuotaExceededError 是一种 DOM 异常，表示尝试在 Web 存储中存储的数据超过了配额限制。Web 存储主要包括：

• localStorage：持久化存储，数据不会随浏览器关闭而消失。
• sessionStorage：会话存储，数据在浏览器会话结束时（如关闭标签页）会被清除。

浏览器存储配额

不同浏览器对 localStorage 和 sessionStorage 的配额有所不同，通常每个域名大约有 5MB 的存储空间。例如：

• Chrome：大约 5MB
• Firefox：大约 5MB
• Safari：大约 5MB

超过这个限制后，再次调用 setItem 会抛出 QuotaExceededError。

2. 产生 QuotaExceededError 的常见原因

1. 存储过多数据：尝试存储的数据总量超过了浏览器的存储限制。
2. 频繁存储：频繁调用 setItem，特别是在循环或递归中，可能会迅速消耗存储配额。
3. 存储大量大对象：如将大量的 JSON 对象或大字符串存储到 localStorage 中。
4. 浏览器限制：不同浏览器对存储配额的限制不同，某些浏览器可能比其他浏览器更严格。

3. 解决方法

1. 检查和清理存储数据

首先，检查存储的数据是否有冗余，尝试清理不必要的数据。

// 清除特定键的数据
localStorage.removeItem('MANAGER-LAYOUT-DATA');

// 或者清除所有存储的数据
localStorage.clear();

2. 压缩数据

如果需要存储大量数据，可以考虑压缩数据，例如使用 LZString 库进行压缩。

npm install lz-string

import LZString from 'lz-string';

const data = { /* 你的数据 */ };
const compressedData = LZString.compress(JSON.stringify(data));

// 存储压缩后的数据
localStorage.setItem('MANAGER-LAYOUT-DATA', compressedData);

// 解压数据
const decompressedData = JSON.parse(LZString.decompress(localStorage.getItem('MANAGER-LAYOUT-DATA')));

3. 使用替代存储方式

如果数据量过大，可以考虑使用其他存储方式：

• IndexedDB：适合存储大量结构化数据，支持异步操作。

  const request = indexedDB.open('MyDatabase', 1);
  
  request.onupgradeneeded = function(event) {
    const db = event.target.result;
    db.createObjectStore('MyStore', { keyPath: 'id' });
  };
  
  request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction('MyStore', 'readwrite');
    const store = transaction.objectStore('MyStore');
    store.put({ id: 'MANAGER-LAYOUT-DATA', data: yourData });
  
    transaction.oncomplete = function() {
      db.close();
    };
  };
  

• 服务器端存储：将数据存储在服务器上，通过 API 进行读写，减少客户端存储压力。

4. 优化存储逻辑

确保只存储必要的数据，避免存储重复或无用的信息。例如：

• 分段存储：将数据分成多个部分存储，而不是一次性存储所有数据。
• 延迟存储：仅在必要时存储数据，而不是每次数据变化时都存储。

5. 捕获和处理异常

在调用 setItem 时，捕获 QuotaExceededError 并进行相应处理。

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
  } catch (e) {
    if (e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
      console.warn('LocalStorage quota exceeded. Consider cleaning up some data.');
      // 例如，清理旧数据或提示用户
    } else {
      throw e;
    }
  }
}

safeSetItem('MANAGER-LAYOUT-DATA', yourData);

4. 示例：优化存储 MANAGER-LAYOUT-DATA

假设你在 React 应用中使用 localStorage 存储 MANAGER-LAYOUT-DATA，以下是一个优化的示例：

import React, { useState, useEffect } from 'react';
import LZString from 'lz-string';

const MyComponent = () => {
  const [layoutData, setLayoutData] = useState(null);

  useEffect(() => {
    // 从 localStorage 中获取并解压数据
    const compressedData = localStorage.getItem('MANAGER-LAYOUT-DATA');
    if (compressedData) {
      try {
        const decompressedData = JSON.parse(LZString.decompress(compressedData));
        setLayoutData(decompressedData);
      } catch (error) {
        console.error('Failed to parse MANAGER-LAYOUT-DATA:', error);
      }
    }
  }, []);

  const saveLayoutData = (data) => {
    try {
      const compressedData = LZString.compress(JSON.stringify(data));
      localStorage.setItem('MANAGER-LAYOUT-DATA', compressedData);
    } catch (e) {
      if (e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
        console.warn('LocalStorage quota exceeded. Attempting to clean up.');

        // 例如，移除旧数据或提示用户
        localStorage.removeItem('MANAGER-LAYOUT-DATA');
        // 重新尝试存储
        try {
          const compressedData = LZString.compress(JSON.stringify(data));
          localStorage.setItem('MANAGER-LAYOUT-DATA', compressedData);
        } catch (err) {
          console.error('Failed to save MANAGER-LAYOUT-DATA after cleanup:', err);
        }
      } else {
        console.error('Failed to save MANAGER-LAYOUT-DATA:', e);
      }
    }
  };

  // 你的组件逻辑...

  return (
    <div>
      {/* 你的组件 JSX */}
    </div>
  );
};

export default MyComponent;

5. 其他建议

• 监控存储使用情况：在开发过程中监控存储使用情况，避免在生产环境中突然遇到存储限制问题。
• 用户提示：如果存储失败，可以向用户提示，并提供解决方案（如清理缓存）。
• 分布式存储：如果应用需要存储大量数据，可以考虑将数据分布到多个存储键中，避免单个键的数据过大。

6. 总结

QuotaExceededError 是由于尝试存储的数据超过了浏览器的存储配额引起的。通过优化存储逻辑、压缩数据、使用替代存储方式以及处理异常，可以有效地避免和解决这个问题。根据你的具体需求，选择最合适的解决方案来管理和存储数据。