JS: несколько объектов в массиве хранятся в локальном хранилище

Question

Я пытался сделать это весь день и просто не могу сделать это правильно.Я прочитал много статей на разных веб-сайтах и ​​попробовал много разных подходов, но я все еще получаю проблемы того или иного рода.

Извините, если это немного случайно, я изо всех сил пытаюсь увидеть свою проблему и такЯ бьюсь над тем, в какую область обратиться за помощью.

Цель компонента: Массив, хранящийся на LS, который содержит объекты, которые содержат информацию о шоу Проблема с компонентом: В зависимостив коде, который мне кажется, либо перезаписывается один объект, я не могу записать в журнал более 2 объектов (которые затем перезаписывают друг друга), либо после точного сохранения 1 объекта массив начинает портиться с большим количеством записей.

TLDR:

Все, что я сейчас пытаюсь сделать, это:

-внести новый объект в новый массив showList

-тянуть мои объекты из массива showList в LS (если существует), нажмите на новый 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

сначала проверьте локальное хранилище, затем вы можете использовать оператор распространения для итерации

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

Answer 2

Сначала вы должны прочитать showList из localStorage, а затем нажать 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

Вы помещаете весь массив, полученный из локального хранилища, во вторую позицию локального 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 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 является отличным источником документации и примеров - здесь для concat .