javascript - JS: Multiple objects in an array stored in local storage - Stack Overflow

admin管理员组

文章数量:1356815

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.

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:

All I'm trying to do at this point is:

-push new object onto new showList array

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

-stringify, then push my new bine array into LS

Below is the relative function.

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

If you'd prefer to see the project you can see that here:

Any help much appreciated, thank you in advance.

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.

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:

All I'm trying to do at this point is:

-push new object onto new showList array

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

-stringify, then push my new bine array into LS

Below is the relative function.

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

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.

• javascript
• json
• local-storage

Share Improve this question Follow asked Oct 5, 2018 at 19:18 phurst-sophurst-so 38655 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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 just works that way - MDN is great source of documentation and examples - here for concat.

You should read showList from localStorage first, then push show onto that array.

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

first check for localstorage, then you can use spread operator for iteration

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

本文标签： javascriptJS Multiple objects in an array stored in local storageStack Overflow