Более одного getItem localStorage в состоянии

Question

Возможно ли иметь более одного localStorage.getItem в состоянии? Прямо сейчас у меня есть это:

const [list, useList] = useState(
    JSON.parse(localStorage.getItem("dictionary")) || [] //tasks in my to-do
  );

, и я должен также сохранить в этом состоянии мои подзадачи, содержащиеся в задаче, с такой структурой:

- task {
   - id
   - body
   - subtasks 
     [{
      - id
      - body
     }]
}

Могу ли я сохранить также подзадачи в локальном хранилище и доступ к ним с помощью getItem?

Вот что я хочу использовать, чтобы получить мои подзадачи:

JSON.parse(localStorage.getItem("domain")) || []
JSON.parse(localStorage.getItem("range")) || []

Answer 1

К счастью, я видел ваш другой вопрос , который содержит фрагмент кода, вы должны добавить его и здесь!

Из того, что я увидел, вы пытаетесь создать дерево Задачи, dictionary - это задача, и она может иметь подзадачи, такие как domain и range, верно? Тогда у вас должна быть такая структура данных:

singleTask = {
  id: 0,
  body: "task",
  domain: [
    {
      id: 00,
      body: "subtask domain 1"
    },
    {
      id: 01,
      body: "subtask domain 2"
    }
  ],
  range: [
    {
      id: 10,
      body: "subtask range 1"
    },
    {
      id: 11,
      body: "subtask range 2"
    }
  ]
}

Когда вы отображаете задачу как TaskListItem, вы отображаете task.body. Затем передайте task.domain компоненту SubtaskDomain, task.range компоненту SubtaskRange. Когда вы отправляете подзадачу, обновляете основной список в App, после этого обновляете локальное хранилище, вы уже это делаете, но на самом деле вам нужен только один элемент набора, и это

localStorage.setItem("dictionary", JSON.stringify(listState));

, потому что у вас есть все в этом!

Answer 2

Да, вы можете иметь более одного массива значений в локальном хранилище. Вам нужно установить элемент, прежде чем вы сможете получить к нему доступ, однако вы должны также сериализовать объект или массив в строку при сохранении.

localStorage.setItem("dictionary", JSON.stringify([]));
localStorage.setItem("domain", JSON.stringify([]));
localStorage.setItem("range", JSON.stringify([]));

alert(JSON.parse(localStorage.getItem("dictionary")));
alert(JSON.parse(localStorage.getItem("domain")));
alert(JSON.parse(localStorage.getItem("range")));