如何实现页面关闭或重载后待办列表内容不丢失？附现有JS代码

要实现页面重载/关闭后待办内容不消失，用浏览器原生localStorage做本地数据持久化即可，它会把数据存在用户本地浏览器中，无过期时间，完全适配这类轻量待办场景。

核心改造点 #

• 统一维护待办数据结构，每条待办记录3个属性：内容文本、是否标记完成、是否被删除
• 页面初始化时优先读取localStorage中存储的历史待办数据，渲染到页面
• 所有增删、标记完成的操作触发时，同步更新本地存储的数据，保证两边状态一致

完整可运行代码 #

// 本地存储键名统一管理
const STORAGE_KEY = 'todoList';
// 全局待办数据源
let todoData = [];

// 页面DOM加载完成后，读取历史数据初始化
document.addEventListener('DOMContentLoaded', function() {
  const savedData = localStorage.getItem(STORAGE_KEY);
  if (savedData) {
    todoData = JSON.parse(savedData);
  }
  renderTodoList();
  bindListEvents();
})

// 渲染待办列表
function renderTodoList() {
  const listContainer = document.getElementById("myUL");
  listContainer.innerHTML = '';
  // 过滤已经删除的条目
  const validTodos = todoData.filter(item => !item.isDeleted);
  validTodos.forEach(todo => {
    const li = document.createElement("li");
    // 还原历史完成状态
    if (todo.isChecked) {
      li.classList.add('checked');
    }
    li.innerText = todo.content;
    li.dataset.index = todoData.findIndex(item => item === todo);

    // 追加删除按钮
    const span = document.createElement("SPAN");
    const txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    listContainer.appendChild(li);
  })
}

// 绑定列表交互事件（事件委托，无需重复绑定）
function bindListEvents() {
  const list = document.querySelector('ul');
  list.addEventListener('click', function(ev) {
    // 标记完成/取消完成
    if (ev.target.tagName === 'LI') {
      const idx = Number(ev.target.dataset.index);
      todoData[idx].isChecked = !todoData[idx].isChecked;
      ev.target.classList.toggle('checked');
      saveToStorage();
    }
    // 删除条目
    if (ev.target.className === 'close') {
      const li = ev.target.parentElement;
      const idx = Number(li.dataset.index);
      todoData[idx].isDeleted = true;
      li.style.display = "none";
      saveToStorage();
    }
  }, false);
}

// 同步数据到本地存储
function saveToStorage() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todoData));
}

// 新增待办逻辑
function newElement() {
  const inputDom = document.getElementById("myInput");
  const inputValue = inputDom.value.trim();
  if (inputValue === '') {
    alert("You must write something!");
    return;
  }
  // 新条目加入数据源
  todoData.push({
    content: inputValue,
    isChecked: false,
    isDeleted: false
  })
  inputDom.value = "";
  // 重渲染+存数据
  renderTodoList();
  saveToStorage();
}

使用说明 #

• 该方案存储容量上限约5MB，完全满足普通待办列表的使用需求
• 数据仅存在当前浏览器当前域名下，用户手动清除浏览器缓存/站点数据后会丢失
• 如果需要跨设备同步待办，需要对接后端接口做服务端存储，纯本地场景用localStorage足够

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