Javascript JS：存储在本地存储器中的阵列中的多个对象

我一整天都在试着这么做，但就是做不好。我在不同的网站上读过很多文章，尝试过很多不同的方法，但我仍然会遇到这样或那样的问题

抱歉，如果这有点随意，我很难看到我的问题，所以我很难在哪方面寻求帮助

组件目标：存储在LS上的数组，用于保存对象和显示信息 组件问题：根据代码，我可能会覆盖一个对象，无法记录超过2个对象（然后会相互覆盖），或者在存储1个对象后，数组开始混乱，出现更多条目

TLDR：

在这一点上，我想做的是：

-将新对象推送到新的显示列表阵列上

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

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

如果您希望看到该项目，您可以在此处看到：

---

非常感谢您的帮助，请提前感谢。

如果您将从本地存储接收的整个阵列推到本地显示列表阵列的第二个位置，则应使用阵列连接：

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数组=[1,2,3,4]；
log（“数组为：”）；
console.log（“\t”，数组）；
log（“concating null将新的null元素添加到数组中”）；
console.log（“\t”，array.concat（null））；
log（“concating empty array deosn't change any”）；
console.log（“\t”，array.concat（[]）；
log（“表达式的结果（null | |[]）是空数组而不是null”）；
console.log（“\t”，null | |[]）；
log（“把它们放在一起，如果我们不想将null添加到数组中，那么我们可以编写array.concat（null | |[]）”；
console.log（“\t”，array.concat（null | |[]）；
log（'additionaly JSON.parse（null）in null'）；
console.log（“\t”，JSON.parse（null））首先检查本地存储，然后可以使用扩展运算符进行迭代

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

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


函数addNewShow（titleArg、typeArg、genreArg、watchedArg）{
//从本地存储获取阵列，如果尚未设置，则默认为空阵列
var showList=JSON.parse（localStorage.getItem（'showList'）| |“[]”）；
变量显示={
标题：titleArg，
类型：typeArg，
类型：耿瑞格，
被监视的：被监视的
};
showList.push（show）；
setItem（“showList”，JSON.stringify（showList））；
};首次调用时，函数将无法工作。它将showList设置为“”（字符串包含空字符串的序列化），而不是长度为1的数组，其中包含来自局部变量show的元素。我曾尝试连接，一定是在某个地方弄糟了。你能解释一下你写的“| |”[]”吗？我原以为是要创建数组来存储在其中，但这是通过var showList=[]；localStorage来完成的。getItem（'showList'）| |“[]）是在本地存储中showList项的值为null时获取数组的。如果它为null，那么我们对字符串“[]运行JSON.parse“-返回空表并保证传递给showList的参数。concat（parameter）始终是数组。但在创建任何条目之前，它为什么会为null？它只是一个安全网吗？在对localStorage中的项进行初始化（运行localStorage.getItem（'asdjbsdfhbj'）并检查结果）之前，它将为null，如果我没有将null更改为空数组，concat将把null作为数组的最后一个元素添加。我正在添加一个片段来解释它，等等。这真的很有帮助，谢谢，这个例子很好。我仍然很难理解为什么concat添加null？如果我绕着圈子转，我想我会更多地关注concat。嘿，谢谢，这看起来是一个干净的解决方案。谢谢，我想我把事情安排错了顺序。这也有助于解释“| |”[]”一点。它是否为第一个条目实现？因为在任何条目之前都不会有数组。对。当没有LS项时，
getItem
返回
null
，因此我们使用
“[]”
作为默认值。