Почему localStorage работает только для 1-го или 2х элементов?

@Константин345 · Регистрация: 17.09.2015

Студворк — интернет-сервис помощи студентам

Необходимо, чтобы по клику на кнопку вызывалась функция addPlus или addMinus и она меняла значение объекта value на +1 или на -1, но итоговое значение value не может быть меньше 0.
Для этого я создал localStorage и обновляю значения в исходном массиве с помощью localStorage:

Код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";
 
export const useStore = defineStore("Stores", () => {
  const Json = ref([
    {
      id: 1,
      value: 0,
      addPlus(id) {
        this.value = this.value + 1;
      },
      addMinus(id) {
        if (this.value > 0) {
          this.value = this.value - 1;
        }
      },
      image: "../img/juice_Ides.png",
      quantity: "В наличии 5 шт",
      name: "Хлеб Крестянский, 400г",
      price: "56",
      currency: "руб",
      basket: "В корзину",
      descr:
        "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
    },
    {
      id: 2,
      value: 0,
      addPlus(id) {
        this.value = this.value + 1;
      },
      addMinus(id) {
        if (this.value > 0) {
          this.value = this.value - 1;
        }
      },
      image: "../img/bread.png",
      quantity: "В наличии 3 шт",
      name: "Белый хлеб, 400г",
      price: "59",
      currency: "руб",
      basket: "В корзину",
      descr: "Белый хлеб",
    }
   
  ]);
 
  const Store = localStorage.getItem("Json");
 
  Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );
 
  watch(
    () => Json,
    (state) => {
      localStorage.setItem("Json", JSON.stringify(state));
    },
    { deep: true }
  );
  return {
    Json,
  };
});

Проблема в том, что если я в массив Json добавляю еще один аналогичный объект(можно даже просто скопировать такой же, сделав 3 объекта в массиве), то ничего не работает и браузер кричит, что

JavaScript
1
Cannot read properties of undefined (reading 'value')

Как исправить?

Надеюсь на вашу помощь!)

Добавлено через 1 час 19 минут
Причину нашел, но как решить эту проблему так и НЕ понял.

В общем, когда первый раз запускается этот проход по массиву

JavaScript
1
2
3
4
5
Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

, то в const Store, который содержит в себе localStorage - уже был запушен внутри watch json-объект, вот тут:

JavaScript
1
localStorage.setItem("Json", JSON.stringify(state));

А когда я добавляю новый объект в массив Json, то я так понимаю watch просто записал в Store localStorage значения при первом запуске и при включении этого блока(который ниже) идет ошибка:

JavaScript
1
2
3
4
5
 Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

Типа в Json.value у нас появился НОВЫЙ объект, а в localStorage его так и нет, потому при проходе внутри map возникает конфликт и получается ошибка.

@DrType · 03.09.2023, 21:48

В чём предназначение этого фрагмента?

JavaScript
1
2
3
4
5
Json.value.map((item, index) =>
    JSON.parse(Store)._value[index].value !== Json.value[index].value
      ? (Json.value[index].value = JSON.parse(Store)._value[index].value)
      : (Json.value[index].value = JSON.parse(Store)._value[index].value)
  );

Здесь дважды одно и то же?..

Новые блоги и статьи Все статьи Все блоги /
Node.js изнутри: Рантайм, архитектура и исходный код Reangularity 29.05.2025 Node. js представляет собой среду выполнения JavaScript, построенную на движке V8 от Google Chrome. Но называть его просто "средой выполнения" - все равно что назвать швейцарский нож "штукой с. . .	Обработка Big Data на C# stackOverflow 29.05.2025 C# традиционно оставался в тени Java, Python и Scala, когда речь заходила о работе с большими данными. Многие считали, что . NET недостаточно зрелая для таких задач. Но времена изменились. Язык C#. . .	Как генерируется мир в Minecraft GameUnited 28.05.2025 Задумывались ли вы когда-нибудь о том, сколько песчинок на нашей планете? По приблизительным подсчетам - более 7 квинтиллионов! Это цыфра с 18 нулями. И все же, это даже не половина количества. . .	Один суперкластер Kubernetes для вообще всего Mr. Docker 28.05.2025 Ваша компания развивается, количество сервисов множится, команды разработки разрастаются, а DevOps-инженеры начинают напоминать ту самую собаку из мема про "всё нормально, когда ничего не нормально". . . .	CAP-теорема или почему идеальной распределенной системы не существует ArchitectMsa 28.05.2025 Вы переводите деньги со своего счета на счет друга. Казалось бы, что может быть проще? Вы открываете приложение банка, вводите сумму, жмете кнопку - и деньги мгновенно переходят с одного счета на. . .
Пишем первый чатбот на C# с нейросетью и Microsoft Bot Framework UnmanagedCoder 28.05.2025 Microsoft Bot Framework представляет собой мощнейший инструментарий для создания разговорных интерфейсов любой сложности. Он предлагает целостную экосистему, которая включает SDK для C#, сервисы. . .	Event-Driven приложения с Apache Kafka и KafkaFlow в .NET stackOverflow 26.05.2025 Для . NET разработчиков работа с Kafka традиционно сопряжена с определенными трудностями. Официальный клиент Confluent хорош, но часто требует написания большого количества шаблонного кода. Многие. . .	Квантовое программирование: Реализуем первый алгоритм на Q# EggHead 26.05.2025 Квантовое программирование — одна из тех областей, которая ещё недавно казалась чем-то недоступным обычному разработчику. Многие представляют себе учёных в белых халатах, работающих с огромными. . .	Запилил скелет проекта физического симулятора. Hrethgir 26.05.2025 Нзвание публикации "Вычислить VS запомнить — простой и экономичный пример организации обработки потока данных для физической симуляции". Пока только скелет, но всё - будет. . . .	Авто-векторизация в C с GCC 14 NullReferenced 25.05.2025 Современные процессоры давно перестали наращивать тактовую частоту как основной способ увеличения производительности. Вместо этого они обзавелись специализироваными блоками SIMD (Single Instruction,. . .