JS：数组中的多个对象存储在本地存储中

Question

我一直在努力做这件事，只是做对了。 我已经在各种网站上阅读了许多文章，并尝试了许多不同的方法，但是我仍然遇到一种或另一种问题。

抱歉，如果遇到一些偶然的情况，我正努力查看自己的问题，因此我正在努力寻求帮助。

组件目标：存储在LS上的数组，该数组保存对象，并在其中显示信息。 组件问题：根据代码，我似乎是覆盖一个对象，不能记录两个以上的对象（然后彼此覆盖）或存储1个对象对象很好，数组开始混乱，出现更多条目。

TLDR：

我现在要做的是：

-将新对象推入新的showList数组

-从LS中的showList数组中拉出我的对象（如果存在），推入新的showList

-stringify，然后将新的合并数组推入LS

以下是相对功能。

function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  showList.push(JSON.parse(localStorage.getItem('showList')));
  console.log(showList);


  localStorage.setItem("showList", JSON.stringify(showList));
};

如果您想查看项目，则可以在这里看到： https : //codepen.io/11PH/pen/NONJBa?editors=1011

任何帮助，不胜感激，在此先感谢您。

Answer 1

您要将从本地存储接收的整个数组推入本地showList数组的第二个位置，应使用数组串联：

localStorage.removeItem('showList');

function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  showList = showList.concat(JSON.parse(localStorage.getItem('showList')||'[]'));
  console.log(showList);


  localStorage.setItem("showList", JSON.stringify(showList));
};

addNewShow(1,2,3,4);
addNewShow(1,2,3,5);
addNewShow(1,2,3,6);
addNewShow(1,2,3,7);

小片段显示为什么（jsonString ||“ []”）很重要：

 var array = [1,2,3,4]; console.log("array is:"); console.log("\\t", array ); console.log("concating null adds new null element to the array"); console.log("\\t", array.concat(null) ); console.log("concating empty array deosn't change anything"); console.log("\\t", array.concat([]) ); console.log("result of expresion (null||[]) is empty array not null"); console.log("\\t", null||[]); console.log("puting it all together, if we don't want to add null to the array then we can write array.concat( null||[] )"); console.log("\\t", array.concat( null||[] ) ); console.log('additionaly JSON.parse(null) in null'); console.log("\\t", JSON.parse(null) ); 

Array.concat就是这样工作的-MDN是很棒的文档和示例源- 这里是concat 。

Answer 2

您应该先从localStorage读取showList ，然后将show推送到该阵列。

 function addNewShow(titleArg, typeArg, genreArg, watchedArg) { // Get array from local storage, defaulting to empty array if it's not yet set var showList = JSON.parse(localStorage.getItem('showList') || "[]"); var show = { title: titleArg, type: typeArg, genre: genreArg, watched: watchedArg }; showList.push(show); localStorage.setItem("showList", JSON.stringify(showList)); }; 

Answer 3

首先检查本地存储，然后可以使用散布运算符进行迭代

  function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  var finalArr = localStorage.getItem('showList') != undefined ? [...showList, ...JSON.parse(localStorage.getItem('showList'))] : showList;
  localStorage.setItem("showList", JSON.stringify(finalArr));
};