删除存储项后localStorage数字编号键断裂的解决方法咨询

方案1：调整遍历逻辑（更推荐，无需修改现有存储） #

原遍历方式直接用循环下标作为localStorage的键取值，在键不连续的情况下会取不到对应值。你可以先提取所有数字类型的键，排序后再遍历，即可按顺序拿到所有值：

// 提取所有数字键并按升序排序
const sortedNumberKeys = Object.keys(localStorage)
  .map(key => {
    const numKey = Number(key)
    return !isNaN(numKey) ? numKey : null
  })
  .filter(key => key !== null)
  .sort((a, b) => a - b)

// 遍历排序后的键执行业务逻辑
for (const key of sortedNumberKeys) {
  const currentValue = localStorage.getItem(key)
  // 此处写你原来的业务逻辑
}

方案2：修复localStorage键为连续递增编号 #

如果需要把存储的键调整为从0开始步长为1的连续编号，可以用以下代码一次性修正：

const sortedNumberKeys = Object.keys(localStorage)
  .map(key => {
    const numKey = Number(key)
    return !isNaN(numKey) ? numKey : null
  })
  .filter(key => key !== null)
  .sort((a, b) => a - b)

// 暂存所有对应值
const valueList = sortedNumberKeys.map(key => localStorage.getItem(key))
// 清除原有数字键
sortedNumberKeys.forEach(key => localStorage.removeItem(key))
// 写入连续编号的新键
valueList.forEach((val, index) => localStorage.setItem(String(index), val))

执行完成后，你的localStorage数字键就会变成0、1、2……的连续格式，原来的遍历代码也可以正常运行。

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