LocalStorage 结合数组使用时异常问题求助

问题根源 #

1. 页面刷新后直接用innerText渲染解析后的数组，会自动转成逗号分隔的字符串，而非生成<li>元素
2. 初始化时tasks数组始终为空，没有从localStorage读取历史数据，导致新添加的内容直接覆盖旧存储
3. 未处理localStorage为空的边界情况

修复后的完整代码 #

HTML（无需修改）

<input type="text" id="input">
<button id="btn">SEND</button>

<ul id="container">
</ul>

JavaScript

const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");

// 从localStorage读取历史数据，初始化tasks数组，无数据则为空数组
const tasks = JSON.parse(localStorage.getItem("task")) || [];

// 页面加载时，根据存储的数据渲染列表
function renderTasks() {
  // 先清空容器，避免重复渲染
  container.innerHTML = "";
  tasks.forEach(task => {
    const li = document.createElement("li");
    li.textContent = task;
    container.appendChild(li);
  });
}

// 页面加载完成后立即渲染历史任务
renderTasks();

// 添加任务逻辑
btn.addEventListener("click", addTask);

function addTask() {
  const taskValue = input.value.trim();
  // 空内容不添加
  if (!taskValue) return;
  
  tasks.push(taskValue);
  // 重新渲染列表
  renderTasks();
  // 更新localStorage
  localStorage.setItem("task", JSON.stringify(tasks));
  // 清空输入框
  input.value = "";
}

关键修改点说明 #

• 初始化数组：const tasks = JSON.parse(localStorage.getItem("task")) || [] —— 优先读取本地存储的任务数据，没有则初始化空数组，保证历史数据不丢失
• 渲染逻辑封装：新增renderTasks函数，遍历数组动态生成<li>元素，彻底解决字符串显示的问题
• 边界处理：添加任务时先判断输入内容是否为空，避免无效数据；渲染前清空容器，防止重复添加
• 体验优化：添加任务后清空输入框，提升使用体验

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