javascript - 在第二个 Web 会话/刷新后在 localStorage 中设置项目

Question

我正在将数组元素设置到我的 localStorage 中。

我在这里单击功能 appendTasks 一次，项目被正确存储在 localStorage 上，用于第一个 Web 会话：

function appendTasks() {
  tasks.push(input.value);
  tasks.join(" ");
  for (let i = 0; i < tasks.length; i++) {
     //Add to Local Storage
    localStorage.setItem(i, tasks[i]) 
  }

这就是我的 localStorage 的样子：

一旦我在添加这些元素后刷新页面并尝试添加更多元素，它根本不会。它甚至可以在第一个 Web 会话中添加元素。

任何人都知道为什么我会看到这种行为？

谢谢

标签： javascriptlocal-storage

Answer 1

不知道你为什么要以这种方式存储任务，但你可以尝试这样的事情。您几乎希望跟踪添加到本地存储的项目数量，并将其作为项目存储在本地存储中。然后每次刷新页面时都设置taskIndex为下一个要使用的索引。

function appendTasks() {
  let taskIndex = localStorage.getItem('taskIndex');
  taskIndex = taskIndex ? parseInt(taskIndex) : 0;
  
  tasks.push(input.value);
  
  for (let i = 0; i < tasks.length; i++) {
    //Add to Local Storage
    localStorage.setItem(taskIndex, tasks[i]);
    taskIndex++
  }
  localStorage.setItem('taskIndex', taskIndex);
}