如何在不覆盖相同键值的情况下更新 localStorage 中的数组？答案

【问题标题】：How do you update an array in localStorage without overwriting same-key values?如何在不覆盖相同键值的情况下更新 localStorage 中的数组？
【发布时间】：2021-04-29 07:21:14
【问题描述】：

我正在尝试从本地存储中检索一个数组，使用相同的键附加一个新数组，然后将其放回存储中。但是我似乎无法让它工作，我尝试将我的数组变成对象，将对象变成数组（我是编程新手，所以我不确定最好的方法是什么。）我也尝试使用扩展运算符、object.entries()、object.assign() 和其他一些无意义的选项。

编辑：

保存到存储的是用户输入值： "[[["name","bob ross"],["about","Painter"]]]"

我希望用户能够为 name 添加“Bilbo Baggins”，为 about 添加“Hobbit”，那么存储应该如下所示：

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

任何帮助将不胜感激！这是我的代码：

//============= Allows writing to LocalStorage without overwrite ==========================
submitbtn.addEventListener('click', function () {
    const oldInfo = JSON.parse(localStorage.getItem('data'));  // Retrieves info from storage to make it writeable
    console.log('old Info: ', oldInfo); // Shows user what's currently saved in oldInfo
    const newInfo = {};
            newInfo.name = name.value; // Name and about are user input values
            newInfo.about = about.value;
    let array = Object.entries(newInfo); // Turns newInfo into an array
    console.log('new info: ', newInfo);
    oldInfo.push(array); // Appends newInfo to oldInfo without overwriting oldInfo data
    console.log(oldInfo);
    localStorage.setItem('data', JSON.stringify(oldInfo)); // Saves newly updated array to localStorage
});

【问题讨论】：

不清楚您期望发生什么，究竟是什么？您能否在您的问题中添加一个示例，包括之前的存储状态、新信息是什么以及之后您期望存储中的内容？（所以，只是简单的数据，你需要做什么？）
在问题中，@TraktorJack。
感谢您清理它
没问题。嗯，据我所知，您的代码应该完全执行您想要的操作...您是否收到任何控制台错误？
不，只是没有附加新值。它只是覆盖它们

标签： javascript arrays json object

【解决方案1】：

我建议您保留对象格式，因为您似乎只需要更新属性，而不需要存储。

这样，您可以通过使用 oldInfo 对象并使用扩展运算符从中创建一个新对象（并摆脱转换）来简单地更新您的商店：

假设你把它放在你的 localStorage（字符串化）中：

const initialInfo = {
   name: '',
   about: ''
};

那么你可以简单地做

const oldInfo = JSON.parse(localStorage.getItem('data'));
localStorage.setItem(
   'data',
   JSON.stringify({ ...oldInfo, name: name.value, about: about.value })
);

... 是 Object.assign 的语法糖，在我看来，这对阅读指令很有帮助。这意味着您正在“克隆” oldInfo 对象，并将新值分配给放置在它后面的列出的属性。

编辑：

问题编辑后；如果你想在一个数组中存储多个对象，你应该使用数组扩展运算符。像这样：

const oldInfo = JSON.parse(localStorage.getItem('data'));
// oldInfo = [{ name: 'example', about: 'test' }];

const yourNewObject = {
   value: name.value,
   about: about.value
};
localStorage.setItem(
   'data',
   JSON.stringify([ ...oldInfo, yourNewObject ])
);

这样你就可以将一个对象添加到你的数组中

【讨论】：

不，看着编辑，OP想要添加条目，而不是替换它们
谢谢，我写了答案而没有看到我打字时的编辑:)
谢谢@Alex！ Cerbrus 的回答更符合我的需要，但感谢您的帮助:)

【解决方案2】：

我已经清理了一些代码。

您的代码应该可以工作，只是在第一次加载时缺少一些错误处理。

// Mock data
const name = { value: 'Foo name' };
const about = { value: 'Bar about' };
const submitbtn = document.getElementById('submit');

// Fake localStorage to make it work in the snippet
mockLocalStorage = {
  getItem: (key) => this[key],
  setItem: (key, value) => this[key] = value
};

submitbtn.addEventListener('click', function() {
  // Make sure we get -something- back in case this is the first time we're accessing the storage.
  const oldInfo = JSON.parse(mockLocalStorage.getItem('data') || '[]');
  console.log('Before', oldInfo);

  // The creation of the new object can be done in 1 step.  
  const array = Object.entries({
    name: name.value,
    about: about.value
  });

  oldInfo.push(array); // Appends newInfo to oldInfo without overwriting oldInfo data
  console.log('After', oldInfo);
  mockLocalStorage.setItem('data', JSON.stringify(oldInfo));
});

&lt;button id="submit" type="button"&gt;Submit!&lt;/button&gt;

【讨论】：