JavaScript 怎么让待办列表刷新后还能恢复？-js教程-PHP中文网

把待办数组用 json.stringify() 写进 localstorage，页面初始化时再用 json.parse() 读取。适合在同一个浏览器、同一个网站来源内恢复小量待办数据。

JavaScript 怎么让待办列表刷新后还能恢复？

准备待办输入和列表

将下面的 HTML 保存为 index.html，脚本文件名是 todo.js。


<meta charset="utf-8">

准备待办输入和列表

输入的文字会以文本节点渲染。建议通过本地 HTTP 服务访问，浏览器对直接打开本地文件的存储行为可能不同。

读取旧数据并渲染列表

将以下代码保存为 todo.js。读不到数据或 JSON 损坏时，先显示空列表。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

const key = 'demo.todos.v1';
const status = document.querySelector('#todo-status');
const list = document.querySelector('#todo-list');
let todos = [];
try {
  const value = JSON.parse(localStorage.getItem(key) ?? '[]');
  if (!Array.isArray(value) || !value.every((item) => typeof item === 'string')) {
    throw new TypeError('invalid todos');
  }
  todos = value;
} catch {
  status.textContent = '无法读取本地待办';
}

function render() {
  list.replaceChildren(...todos.map((title) => {
    const item = document.createElement('li');
    item.textContent = title;
    return item;
  }));
}
render();

使用独立且带版本的键名，后续数据结构调整时更容易识别旧数据。

提交后先保存再更新界面

将这段代码追加到 todo.js。运行 python3 -m http.server 8000，在浏览器访问 http://localhost:8000。

const input = document.querySelector('#todo-text');
document.querySelector('#todo-form').addEventListener('submit', (event) => {
  event.preventDefault();
  const title = input.value.trim();
  if (!title) return;
  const next = [...todos, title];
  try {
    localStorage.setItem(key, JSON.stringify(next));
  } catch {
    status.textContent = '保存失败，请检查浏览器存储设置';
    return;
  }
  todos = next;
  render();
  input.value = '';
  status.textContent = '';
});

添加两项后刷新，列表应恢复原内容。换端口会改变来源，因此验证时始终使用同一地址。