使用JSON.stringify存储字典至sessionStorage后出现异常键的问题排查

哦，这个坑我之前踩过！简直莫名其妙，存的时候好好的，追加内容后突然冒出一堆null，查了半天才搞懂原因。

问题根源 #

你应该是在追加内容的时候，把原本的普通对象误当成数组来操作了——或者说，用了大跨度的数字作为键名，让JavaScript把这个对象识别成了类数组对象。

JSON.stringify处理类数组对象时，会自动遍历从0到最大数字键之间的所有索引，但凡某个索引没有对应的键值，就会用null来补全。你这里最大的键是2016，所以就会被自动填充0到2015的null值，刚好对应你遇到的情况。

解决方案 #

1. 始终用字符串作为年份键名（最稳妥）

最初你的字典里用的是字符串"2016"作为键，这是正确的。后来追加内容时，大概率改成了数字2016作为键，才触发了类数组的判断逻辑。

所以修改你的赋值逻辑，确保年份键始终是字符串类型：

// 错误写法：用数字键，触发类数组识别
yourData.name[2016] = { 1: { info: [...] } };

// 正确写法：用字符串键
yourData.name["2016"] = { 1: { info: [...] } };

// 如果年份是变量，用模板字符串转成字符串
const targetYear = 2016;
yourData.name[`${targetYear}`] = { 1: { info: [...] } };

2. 清理已生成的null键（应急方案）

如果已经产生了带有null键的对象，可以在JSON.stringify前手动过滤掉这些无效键：

// 工具函数：过滤对象中的null值键
function cleanNullKeys(obj) {
  return Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => value !== null)
  );
}

// 清理后再存储
const cleanedName = cleanNullKeys(yourData.name);
yourData.name = cleanedName;
sessionStorage.setItem('yourStorageKey', JSON.stringify(yourData));

额外提醒 #

尽量避免用大数字作为对象的键名，尤其是不要让对象出现类似数组的数字索引结构。类数组对象的判断逻辑比较“敏感”，保持键名为字符串能彻底避免这类问题。

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