如何在localStorage中追加数组元素时不覆盖原有同键值存储数据？

核心问题拆解 #

• 空缓存触发报错：当localStorage中没有存储过data键时，localStorage.getItem('data')返回null，直接执行JSON.parse(null)会抛出语法错误，中断后续逻辑。
• 存储格式认知偏差：你预期的目标存储字符串"[[["name","bob ross"],["about","Painter"]]], [[["name","Bilbo Baggins"],["about","Hobbit"]]]" 不属于合法JSON结构，JSON规则明确要求顶层仅能存在1个对象、数组或原始值，不允许两个独立数组用逗号拼接作为顶层值，这种格式后续读取时会直接解析失败。
• 结构对齐逻辑正确但缺兜底：你当前已存的初始缓存"[[["name","bob ross"],["about","Painter"]]]" 解析后为顶层数组嵌套1个信息块，信息块结构是[["name","xxx"],["about","yyy"]]，和你用Object.entries()生成的新条目结构完全匹配，push追加的逻辑方向没有问题，只是因为缺少异常兜底、对合法存储格式的理解偏差，才导致运行达不到预期。

修正后的可运行代码 #

submitbtn.addEventListener('click', function () {
    // 兜底处理：无缓存时初始化为空数组，避免parse报错
    const oldInfo = JSON.parse(localStorage.getItem('data') || '[]');  
    console.log('old Info: ', oldInfo);

    // 读取用户输入生成新条目
    const newInfo = {};
    newInfo.name = name.value; 
    newInfo.about = about.value;
    // 转成和已有结构完全一致的键值对数组
    const newEntry = Object.entries(newInfo); 
    console.log('new entry: ', newEntry);

    // 追加新条目到旧数组，不会覆盖原有内容
    oldInfo.push(newEntry);
    console.log('updated full data: ', oldInfo);

    // 序列化后存回缓存
    localStorage.setItem('data', JSON.stringify(oldInfo)); 
});

运行后的实际存储效果 #

代码执行完成后，localStorage中存储的合法JSON字符串结构为：

"[[[\"name\",\"bob ross\"],[\"about\",\"Painter\"]],[\"name\",\"Bilbo Baggins\"],[\"about\",\"Hobbit\"]]]"

所有用户条目被顶层数组统一包裹，既符合JSON解析规则，又和你最初的存储结构逻辑完全匹配，后续读取时可以直接遍历数组，拿到每一个用户的姓名、简介信息。

注意：不要追求两个独立数组直接拼接到字符串中的非标准格式，这种格式会导致后续读取频繁出现解析错误，大幅增加维护成本。

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