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

Question

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

对不起，如果有点随意，我正在努力解决我的问题，所以我正在努力寻找寻求帮助的领域。

组件目标： 存储在 LS 上的数组，用于保存对象，保存有关节目的信息 组件问题：根据代码，我似乎要么覆盖单个对象，不能记录超过 2 个对象（然后相互覆盖），要么在存储 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);

小 sn-p 说明为什么 (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 for 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));
};