当使用 localStorage 时，浏览器对每个域的存储限制通常是 5MB 左右（不同浏览器可能略有差异）。
当超过限制时，会抛出 QuotaExceededError 错误。

突破 5MB 限制的替代方案

1、使用 IndexedDB

IndexedDB 是浏览器内置的异步数据库，存储容量通常为 250MB 以上（具体取决于浏览器和用户设置）。

const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('dataStore', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('dataStore', 'readwrite');
  const store = transaction.objectStore('dataStore');
  
  // 存储数据
  store.put({ id: 'largeData', value: largeData });
};

2. 使用 Web Storage API 的扩展（如 localForage）👍推荐

• localForage 是一个封装了 IndexedDB、WebSQL 和 localStorage 的库，自动选择最佳存储方式：
• 中文：https://localforage.docschina.org 英文：https://localforage.github.io/localForage

引用

引用非常简单，只需要引入 js 文件即可直接使用

<script src="localforage/dist/localforage.js"></script>
<script>localforage.getItem('something', myCallback);</script>

存储

// 通过 localForage 存储大数据
localforage.setItem('largeData', bigData).then(() => {
  console.log('Data saved!');
});

// localForage 同样支持回调函数
localforage.setItem('key', 'value', doSomethingElse);

获取

localforage.getItem('somekey').then(function(value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

// 回调版本：
localforage.getItem('somekey', function(err, value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
});

移除

localforage.removeItem('somekey').then(function() {
    // 当值被移除后，此处代码运行
    console.log('Key is cleared!');
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

3、其它方案

• 数据压缩
• 清理不必要的数据
• 分片存储（Sharding）
• 利用浏览器缓存（Cache API）
• 终极方案：服务端存储