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

您应该首先从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 2

您要将从本地存储接收的整个数组推到本地 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是大量文档和示例的来源-here用于 concat 。

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));
};

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

3 个答案: