如何使用HTML/JavaScript保存待办列表元素？

核心思路 #

利用浏览器的localStorage持久化存储待办数据，它能将数据保存在用户本地，页面刷新或重新打开后依然可以读取。我们需要把每个待办项的内容和完成状态都存起来，再在页面加载时恢复这些数据。

具体修改步骤 #

• 定义存储工具函数：实现数据存入和读取localStorage的逻辑
• 重构渲染逻辑：根据存储的数据动态生成页面列表
• 同步操作与存储：添加、删除、切换完成状态时，同步更新存储数据
• 页面初始化加载：页面打开时先读取存储数据，再渲染列表

修改后的完整JavaScript代码 #

// 初始化待办数据数组
let todos = [];

// 保存待办数据到localStorage
function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

// 从localStorage加载待办数据
function loadTodos() {
  const saved = localStorage.getItem('todos');
  if (saved) {
    todos = JSON.parse(saved);
  } else {
    // 初始默认待办项
    todos = [
      { text: 'Wake up', checked: false },
      { text: 'Meeting with the team', checked: false },
      { text: 'Have an amazing lunch', checked: false },
      { text: 'Finish the project', checked: false },
      { text: 'Get some pizza', checked: false },
      { text: 'Go to sleep', checked: false }
    ];
    saveTodos();
  }
}

// 渲染待办列表到页面
function renderTodos() {
  const ul = document.getElementById('myUL');
  // 清空现有列表
  ul.innerHTML = '';
  
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.textContent = todo.text;
    if (todo.checked) {
      li.classList.add('checked');
    }
    // 添加删除按钮
    const span = document.createElement('SPAN');
    const txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);
    
    // 绑定删除按钮事件
    span.onclick = function() {
      todos.splice(index, 1);
      saveTodos();
      renderTodos();
    }
    
    ul.appendChild(li);
  });
}

// 切换待办项完成状态
function toggleTodo(index) {
  todos[index].checked = !todos[index].checked;
  saveTodos();
  renderTodos();
}

// 页面加载初始化
document.addEventListener('DOMContentLoaded', function() {
  loadTodos();
  renderTodos();
  
  // 绑定列表点击事件（切换完成状态）
  const list = document.querySelector('ul');
  list.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'LI') {
      const index = Array.from(list.children).indexOf(ev.target);
      toggleTodo(index);
    }
  }, false);
});

// 添加新待办项
function newElement() {
  const inputValue = document.getElementById("myInput").value.trim();
  if (inputValue === '') {
    alert("You must write something!");
    return;
  }
  
  todos.push({ text: inputValue, checked: false });
  saveTodos();
  renderTodos();
  
  document.getElementById("myInput").value = "";
}

代码说明 #

• localStorage仅支持存储字符串，所以用JSON.stringify()把数组转为字符串存储，读取时用JSON.parse()转回数组
• renderTodos()函数负责将数据数组动态渲染为页面列表项，每次数据变更后重新渲染
• 所有修改待办数据的操作（添加、删除、切换状态）都会调用saveTodos()更新存储
• 通过DOMContentLoaded事件确保页面元素加载完成后再执行数据初始化和渲染

注意事项 #

• localStorage的数据仅保存在当前浏览器中，更换浏览器或清除浏览器缓存会丢失数据
• 若需要跨设备同步数据，需结合后端数据库实现，当前方案仅适用于本地使用场景

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