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

Question

我一整天都在尝试这样做，但就是做对了。我在各种网站上阅读了许多文章并尝试了许多不同的方法，但我仍然遇到了这样或那样的问题。

对不起，如果它有点随意，我正在努力查看我的问题，所以我正在努力寻求帮助。

组件目标：存储在 LS 上的数组，用于保存对象，保存有关节目的信息 组件问题：根据代码，我似乎要么覆盖单个对象，要么记录 2 个以上的对象（然后相互覆盖）或在存储 1 个之后对象很好，数组开始弄乱更多条目。

域名注册地址：

在这一点上，我要做的就是：

-将新对象推送到新的 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||"[]")很重要的小片段：

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

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