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

尝试一下

 b=JSON.parse(b)
    for(let i=0;i<(b).length;i++)
     $('ul').append('<li>'  + b[i] +  '</li>');

由于b是一个数组，因此您必须遍历所有元素并将它们一个接一个地添加

Answer 2

此处的关键是避免在初始化列表标记时避免本地存储中的密钥迭代，而是在要针对其存储任务数据的"tasks"密钥上迭代数组数据（如果有）。 localStorage。

在您的情况下，您可以更新代码的“加载”功能，以便通过localStorage键从"tasks"检索以前保存的任务数据作为任何数组，如下所示：

/*
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代码片段中不起作用，因此您需要在自己的服务器上运行此代码。希望有帮助！

在jQuery中将localStorage数据更改为html列表标签

2 个答案: