如何为待办事项的编辑文本、复选框及删除状态添加localStorage支持

编辑文本本地存储逻辑修复 #

你之前将addToLocalStorage放在createTodoText返回前的写法无效，是因为调用时机错误：该位置只会在创建textarea元素时执行一次，而用户编辑完成点击外部触发blur事件时才是待办内容真实更新的时机，需要把存储调用放到blur回调中：

const createTodoText = (todo) => {
    const itemText = document.createElement('TEXTAREA');
    itemText.setAttribute('id', 'display-text');
    itemText.classList.add('todoText');
    itemText.addEventListener('input', function () {
        updateHeight(this);
    });
    itemText.value = todo.name;
    // 点击外部更新待办内容时同步到本地存储
    itemText.addEventListener('blur', (e) => {
        todo.name = e.currentTarget.value;
        addToLocalStorage(todos);
    });
    return itemText;
};

复选框、删除状态的本地存储同步 #

实现逻辑和编辑文本完全一致，只需在对应状态变更的逻辑后追加addToLocalStorage(todos)调用即可：

• 复选框状态变更：给复选框绑定的change事件中，修改完todo.completed属性后，调用addToLocalStorage(todos)
• 删除待办：给删除按钮绑定的click事件中，从todos数组移除对应待办项后，调用addToLocalStorage(todos)

可选优化 #

你当前的addToLocalStorage函数每次执行都会调用renderTodos重绘所有待办，如果频繁触发（比如连续点击多个复选框）可能会产生不必要的渲染开销。如果状态变更后你已经手动更新了对应DOM元素的状态，可以把renderTodos从addToLocalStorage中移除，仅在初始化读取本地存储时调用即可。

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