javascript - 将 localStorage 数据更改为 jQuery 中的 html 列表标记

Question

我有一个待办事项应用程序，它将从输入标签接收到的数据存储在一个数组中，并存储在本地存储中。 我希望每次打开新选项卡时都将数据显示为列表。我不断得到别的东西。

<input type="text" class="input" id="input1"> 
<span class="add" id="add">Add task</span>

var nextTask = [];
$('.add').click(function() {
  var acceptInput = $('.input').val();
  nextTask.push(acceptInput);
  localStorage.setItem("tasks", JSON.stringify(nextTask));
});

$(function() {
  for (var i = 0; i < localStorage.length; i++) {
    var a = localStorage.key(i);
    var b = localStorage.getItem(a);
    $('ul').each(function() {
      $(this).append('<li>' + JSON.parse(b) + '</li>'); // Change output from localStorage to list tag
    })
  }
});

我的输出是这种性质的

hello, good morning, create new task, install update 

代替这个

Hello
Good morning 
Create new task
Install update

Answer 1

这里的关键是避免在初始化列表标签时在本地存储中迭代键，而是在您正在访问的 "tasks" 键上迭代数组数据(如果有的话)在 localStorage 中存储任务数据。

在您的情况下，您可以更新代码的“加载”函数，以便通过 “tasks” 键从 localStorage 中检索以前持久化的任务数据作为任何数组，例如这个:

/*
Fetch an array of tasks in JSON from the "tasks" key (or an empty JSON
array if nothing stored under that key) and parse the corresponding
array object
*/
const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");

这将为您提供一个数组(空的或填充有任务数据)，然后可以对其进行迭代以使用初始数据填充 ul，如下所示:

tasks.forEach(function(task) {
  /* 
  For each task in loaded task list, append an item to the ul element
  */
  $('ul').append($('<li>').text(task));
});

基于此方法的完整解决方案是:

$('.add').click(function() {
  const acceptInput = $('.input').val();
  
  /* Load current tasks or init to empty array if none in localStorage */
  const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
  
  tasks.push(acceptInput);
  
  /* Persist updated tasks list to localStoarge */
  localStorage.setItem("tasks", JSON.stringify(tasks));
});


$(function() { 

  /* Load current tasks or init to empty array if none in localStorage */
  const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
  
  tasks.forEach(function(task) {
    /* For each task in loaded task list, append an item to the ul element */
    $('ul').append($('<li>').text(task));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" class="input" id="input1"> <span class="add" id="add">Add task</span>
<ul></ul>

请注意，localstorage API 在 stackoverflows 代码片段功能中不起作用，因此您需要在自己的服务器上运行此代码。希望对您有所帮助!