如何用jQuery将localStorage待办数据转为HTML列表？显示异常求助

Let's walk through what's going wrong and how to fix it so your tasks show up as individual list items instead of a comma-separated string.

What's Causing the Problem? #

1. You're looping through all localStorage entries: Your current code iterates over every key in localStorage, but you only care about the "tasks" key where you stored your array. This could lead to unexpected behavior if other items exist in localStorage.
2. You're appending the entire array as one list item: When you parse the localStorage value, you get an array of tasks—but inserting the whole array into a single <li> converts it to a comma-separated string, hence the messy output.
3. You don't load existing tasks into your array on page load: Right now, nextTask starts empty every time the page refreshes. Adding a new task would overwrite your existing list instead of appending to it.

Corrected Code #

First, ensure your HTML has a <ul> to hold tasks (I added an ID for easier targeting):

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

Then update your JavaScript:

// Initialize tasks array with existing data from localStorage
let nextTask = JSON.parse(localStorage.getItem("tasks")) || [];

// Reusable function to render tasks as individual list items
function renderTasks() {
  const taskList = $('#taskList');
  taskList.empty(); // Clear existing items to avoid duplicates
  
  nextTask.forEach(task => {
    if (task.trim()) { // Skip empty tasks
      taskList.append(`<li>${task}</li>`);
    }
  });
}

// Load tasks when the page is ready
$(function() {
  renderTasks();
  
  // Add task on click
  $('.add').click(function() {
    const acceptInput = $('.input').val().trim();
    if (acceptInput) { // Only add non-empty tasks
      nextTask.push(acceptInput);
      localStorage.setItem("tasks", JSON.stringify(nextTask));
      renderTasks(); // Update the list immediately
      $('.input').val(''); // Clear input for next task
    }
  });
});

Key Changes Explained #

• Proper initialization: We load existing tasks from localStorage when the script starts, so you never lose previous data when adding new tasks.
• renderTasks() function: This clears the list and loops through each task in the array, creating a separate <li> for every item—exactly what you want for individual list entries.
• Input validation: Trimming the input and skipping empty values prevents blank list items from cluttering your to-do list.
• Immediate feedback: After adding a task, we call renderTasks() so the user sees the new task right away without needing to refresh.
• Clean input field: Resets the input box after adding a task for a smoother user experience.

内容的提问来源于stack exchange，提问作者BeardedPrince