如何在JavaScript中实现页面刷新后数据不丢失？（附待办列表代码）

嘿，这个问题很常见——要让待办项在页面刷新后保留，咱们得把数据存在浏览器的**本地存储（localStorage）**里，它能把数据持久化保存在用户的浏览器中，除非主动清除否则不会消失。下面我结合你的代码一步步修改，实现这个功能：

第一步：补全基础DOM变量（你的代码里可能漏了） #

首先得获取页面上的输入框和列表容器，不然JS没法操作它们：

const input = document.getElementById('userInput');
const ul = document.querySelector('.listItems ul');

第二步：新增存储与加载待办的核心函数 #

我们需要两个关键函数：一个把当前待办列表保存到localStorage，另一个在页面加载时从存储中恢复待办。

保存待办到本地存储 #

这个函数会把所有待办项的文本和完成状态转成JSON字符串存起来：

function saveTodos() {
  // 把每个li元素转成包含文本和完成状态的对象
  const todos = Array.from(ul.children).map(li => ({
    text: li.firstChild.textContent,
    isDone: li.classList.contains('done')
  }));
  // 存到localStorage，只能存字符串，所以用JSON.stringify转换
  localStorage.setItem('todos', JSON.stringify(todos));
}

页面加载时恢复待办 #

页面打开或刷新后，读取存储的待办数据，重新创建列表项并恢复完成状态：

function loadTodos() {
  const savedTodos = localStorage.getItem('todos');
  // 如果没有存储的数据，直接返回
  if (!savedTodos) return;

  // 把JSON字符串转成对象数组
  const todos = JSON.parse(savedTodos);
  todos.forEach(todo => {
    // 创建待办项
    createListElement(todo.text);
    // 如果原本是已完成状态，加上done类
    if (todo.isDone) {
      ul.lastChild.classList.add('done');
    }
  });
}

// 页面DOM加载完成后自动执行恢复逻辑
document.addEventListener('DOMContentLoaded', loadTodos);

第三步：修改原有函数，同步更新存储 #

接下来要修改你原来的createListElement和删除、标记完成的逻辑，让每次操作后都同步更新本地存储：

重构createListElement函数 #

让它可以接收文本参数（方便加载时复用），并在添加新项后保存：

function createListElement(todoText) {
  var li = document.createElement("li");
  // 加载时用传入的文本，新增时用输入框的值
  const text = todoText || input.value;
  li.appendChild(document.createTextNode(text));
  ul.appendChild(li);

  // 标记完成的逻辑，切换后保存
  function crossOut() {
    li.classList.toggle("done");
    saveTodos();
  }
  li.addEventListener("click", crossOut);

  // 删除按钮逻辑
  var dBtn = document.createElement("button");
  dBtn.appendChild(document.createTextNode("X"));
  li.appendChild(dBtn);

  function deleteListItem(){
    li.classList.add("delete");
    // 如果你的delete类有过渡动画，等动画结束再移除并保存
    setTimeout(() => {
      li.remove();
      saveTodos();
    }, 300);
  }
  dBtn.addEventListener("click", deleteListItem);

  // 新增待办后清空输入框并保存
  if (!todoText) {
    input.value = '';
    saveTodos();
  }
}

完善添加待办的逻辑 #

给Add按钮加上点击事件（你的代码里没写），并优化输入判断：

// 回车添加待办
function addListAfterKeypress(event) {
  // 去掉首尾空格，避免添加空项
  if (input.value.trim().length > 0 && event.which === 13) {
    createListElement();
  }
}
input.addEventListener("keypress", addListAfterKeypress);

// 点击Add按钮添加待办
document.getElementById('enter').addEventListener('click', () => {
  if (input.value.trim().length > 0) {
    createListElement();
  }
});

关键知识点说明 #

• localStorage是浏览器原生API，仅能存储字符串类型的数据，所以我们用JSON.stringify和JSON.parse来处理对象数组的转换。
• 每次修改待办列表（添加、标记完成、删除）后都要调用saveTodos，确保存储的数据和页面显示一致。
• 页面加载时通过DOMContentLoaded事件触发恢复逻辑，避免DOM还没加载完就执行操作。

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