点击编辑后Local Storage对象值无法更新问题求助

核心问题出在blur事件的匹配逻辑上：

• 你点击编辑按钮修改输入框后，在blur事件里用object.text === itemInput.value去匹配原数组对象，但原数组里的对象文本还是修改前的旧值，根本匹配不到目标对象，所以map操作不会修改任何元素，自然localStorage里的数据没变化。

另外还有个隐藏问题：每次点击编辑按钮，都会给同一个input元素添加新的blur事件监听器，多次点击后，失焦时会重复执行多次保存逻辑，可能导致数据异常。

修改后的代码 #

todoList.addEventListener('click', (e) => {
    if (e.target.dataset.button === 'delete-button') {
        const arrayWithoutRemovedItem = todoLocalStorage.filter((item) => {
            return item.text !== e.target.closest('.todo-item-wrapper').firstElementChild.value;
        });

        todoLocalStorage = arrayWithoutRemovedItem;
        localStorage.setItem('todo', JSON.stringify(todoLocalStorage));
        
        const itemWrapper = e.target.closest('.todo-item-wrapper');
        itemWrapper.replaceChildren();

    } else if (e.target.dataset.button === 'edit-button') {
        const itemInput = e.target.closest('.todo-item-wrapper').firstElementChild;
        // 保存修改前的原始文本，用于后续匹配数组对象
        const originalText = itemInput.value;

        itemInput.removeAttribute("readonly");
        itemInput.focus();

        // 添加blur监听器时，使用once: true确保只执行一次，避免重复绑定
        itemInput.addEventListener('blur', (e) => {
            const newText = e.target.value;
            const editItem = todoLocalStorage.map(object => {
                // 用原始文本匹配目标对象，替换为新值
                if (object.text === originalText) {
                    return {...object, text: newText};
                }
                return object;
            });

            todoLocalStorage = editItem;
            localStorage.setItem('todo', JSON.stringify(todoLocalStorage));
            itemInput.setAttribute("readonly", true);
        }, { once: true }); // 关键：once选项，监听器执行一次后自动移除
    }
});

关键修改点 #

• 点击编辑按钮时，提前保存输入框的原始文本值，用于后续在数组中定位要修改的对象
• 在map逻辑中，用原始文本匹配对象，替换为修改后的新值
• 给blur事件添加{ once: true }选项，确保每次编辑只绑定一次失焦事件，避免重复触发保存逻辑

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