脑子记待办总漏：写了个清单工具，本地存不丢

待办记在便签上，便签丢了；记在手机备忘录，翻起来麻烦。我想要个网页：加了就一直在，勾掉划线，不要了删掉，刷新页面也不丢。核心是数据用数组管、存本地，渲染用"事件委托"一处监听全列表。

一、数据就是一个数组

let todos = JSON.parse(localStorage.getItem('todos') || '[]');
// todos = [{id: 1, text:'买菜', done:false}, ...]

function add(text) {
  todos.push({ id: Date.now(), text, done: false });
  save();
}
function toggle(id) {
  const t = todos.find(x => x.id === id);
  t.done = !t.done; save();
}
function del(id) {
  todos = todos.filter(x => x.id !== id); save();
}
function save() {
  localStorage.setItem('todos', JSON.stringify(todos));
  render();
}

增用 push、改用 find 后翻转 done、删用 filter 排除。id 用 Date.now()，保证唯一、好定位。每次改完 save() 顺手重渲染。

二、事件委托：一个监听管全列表

新手爱给每个删除按钮单独 addEventListener，列表一变就失效或泄漏。正确是在父容器上监听一次，靠 data-id 找目标：

list.addEventListener('click', e => {
  const li = e.target.closest('li');
  if (!li) return;
  const id = +li.dataset.id;
  if (e.target.classList.contains('toggle')) toggle(id);
  if (e.target.classList.contains('del')) del(id);
});

e.target 是实际点到的元素，closest('li') 往上找到所在行，dataset.id 拿出这行的 id。无论列表增删，这一个监听始终有效——新增的项自动被它管到。

三、渲染简单直出

function render() {
  list.innerHTML = todos.map(t =>
    `<li data-id="${t.id}" class="${t.done ? 'done' : ''}">
       <span class="toggle">${t.done ? '✔' : '○'}</span>
       ${t.text}
       <span class="del">删</span>
     </li>`
  ).join('');
}

四、操作对照

小结

待办清单的数据是一个对象数组，增 push、改 find 后翻转 done、删 filter 排除，id 用 Date.now() 保证唯一好定位，每次改完存 localStorage 再重渲染。列表交互用事件委托——在父容器上监听一次，靠 e.target.closest('li') 和 dataset.id 定位行，新增项自动被管到，不用给每个按钮单独绑监听。