大佬教程收集整理的这篇文章主要介绍了如何在不覆盖相同键值的情况下更新 localStorage 中的数组？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试从本地存储中检索一个数组，添加一个具有相同键的新数组，然后将其粘贴回存储中。然而，我似乎无法让它工作，我已经尝试将我的数组变成对象，并将对象变成数组（我是编程新手，所以我不确定最好的方法是什么。）我也尝试使用扩展运算符 object.entrIEs()、object.assign() 和其他一些无意义的选项。
编辑：
保存到存储的是用户输入值：
"[[["name","bob ross"],["about","Painter"]]]"
我希望用户能够添加“Bilbo Baggins”作为名字，“Hobbit”作为about，那么存储应该是这样的：
"[[["name","Painter"]]],[[["name","Bilbo Baggins"],"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
});
我建议你保留一个对象格式，因为你似乎只需要更新属性，而不是存储。
那样，您可以通过使用 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 ])
);
通过这种方式，您将向数组中添加一个对象
,我已经清理了一些代码。
您的代码应该可以工作，只是在第一次加载时缺少一些错误处理。
// 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));
});
<button id="submit" type="button">Submit!</button>以上是大佬教程为你收集整理的如何在不覆盖相同键值的情况下更新 localStorage 中的数组？全部内容，希望文章能够帮你解决如何在不覆盖相同键值的情况下更新 localStorage 中的数组？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。