localStorage缓存多页资源异常问题求助

我之前做项目时也碰到过几乎一模一样的情况！明明内存里数据全齐，存到localStorage就少了几页，结合你的场景，大概率是这几个原因，你可以逐一排查：

1. 没等所有异步请求完成就写入localStorage #

这是最常见的坑！看你的代码里声明了promises数组，但如果没有用Promise.all()等所有请求都resolve就执行localStorage.setItem()，那此时catalogItems里只有已经返回的4页数据，剩下2页还在请求中，自然存不全。

解决办法：确保所有异步请求完成后再执行缓存操作：

Promise.all(promises)
  .then(() => {
    // 此时所有页面的数据都已经收集到catalogItems里了
    try {
      const serializedData = JSON.stringify(catalogItems);
      localStorage.setItem('catalogCache', serializedData);
      console.log('所有页面缓存成功');
    } catch (err) {
      console.error('缓存时出错:', err);
    }
  })
  .catch(err => {
    console.error('获取页面数据失败:', err);
  });

2. JSON序列化失败导致数据截断 #

localStorage只能存字符串，所以你肯定是用JSON.stringify()把对象转成字符串，但如果某一页的数据里包含不可序列化的类型（比如undefined、Function、循环引用的对象），JSON.stringify()会直接跳过这些属性，甚至在严重情况下抛出错误（如果没捕获错误，代码会终止，导致只存了前面成功序列化的部分）。

解决办法：

• 先捕获序列化的错误，排查问题数据：

try {
  const serializedData = JSON.stringify(catalogItems);
  console.log('序列化后数据长度:', serializedData.length);
  localStorage.setItem('catalogCache', serializedData);
} catch (e) {
  console.error('序列化失败，原因:', e);
  // 可以在这里逐个检查partInfo里的项，看哪个有问题
}

• 如果是循环引用问题，可以用第三方库（比如flatted）替代原生JSON.stringify，它能处理循环引用的对象。

3. 单条localStorage项的隐性长度限制 #

虽然Chrome的localStorage总空间一般是5MB左右，但有些场景下单条数据的长度可能有隐性限制（比如部分浏览器对单条字符串的长度有约束）。你可以先打印序列化后的字符串长度，看是否接近临界值：

const serialized = JSON.stringify(catalogItems);
console.log('序列化后字符数:', serialized.length); // 1MB约等于100万字符

如果确实接近限制，可以考虑把数据拆分到多个localStoragekey里（比如按页面分：catalog_page_1、catalog_page_2...）。

最后排查步骤 #

1. 先在Promise.all()的回调里打印catalogItems.partInfo.length，确认数据条数是6页对应的数量；
2. 然后打印序列化后的字符串，检查是否完整；
3. 捕获序列化和存储的所有错误，看是否有报错信息。

内容的提问来源于stack exchange，提问作者user6388353