JS:数组中的多个对象存储在本地存储中 [英] JS: Multiple objects in an array stored in local storage

问题描述

我整天都在尝试这样做，只是做对了.我已经在各种网站上阅读了许多文章，并尝试了许多不同的方法，但是仍然遇到某种问题.

I've been trying to do this all day and just can't get it right. I've read many articles on various websites and tried many different approaches, but I am still getting issues of one kind or another.

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

Sorry if it's a little haphazard, I'm struggling to see my issue and so I'm struggling on what area to ask for help.

组件目标:存储在LS上的数组，该数组用于保存对象，该对象用于保存节目中的信息 组件问题:根据代码，我似乎是覆盖了一个对象，不能记录两个以上的对象(然后彼此覆盖)，或者在存储了1个对象之后，数组开始混乱了项.

Component aim: Array stored on LS that holds objects, that hold information on shows Component issue: Depending on the code I seem to either be overwritting a single object, cant log more than 2 objects (that then overwrite each other) or after storing 1 object fine the array starts messing up with more entries.

TLDR:

目前我要做的是:

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

-push new object onto new showList array

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

-pull my objects from a showList array in LS (if exists), push into new showList

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

-stringify, then push my new combine array into 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

If you'd prefer to see the project you can see that here: https://codepen.io/11PH/pen/NONJBa?editors=1011

非常感谢您的帮助，谢谢.

Any help much appreciated, thank you in advance.

推荐答案

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

You are pushing entire array received from local storage into second position of local showList array, you should use array concatenation:

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 ||"[[]")很重要:

Little snippet showing why (jsonString||"[]") is important:

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是文档和示例的绝佳来源-

Array.concat just works that way - MDN is great source of documentation and examples - here for concat.

这篇关于JS:数组中的多个对象存储在本地存储中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！