如何修改Todo应用中Local Storage内的任务对象值？

要实现编辑任务时同步更新任务对象title并保存到LocalStorage，需要在输入框内容修改后触发数据更新逻辑，具体修改如下：

关键修改步骤 #

• 给可编辑的输入框添加失去焦点和回车事件，触发保存操作
• 根据任务id找到数组中对应的任务对象，更新其title属性
• 更新后重新渲染任务列表并同步数据到LocalStorage
• 优化交互：编辑时按钮文本切换为"save"，保存后切回"edit"并恢复只读

修改后的完整代码 #

JavaScript部分 #

const inputWriteTask = document.querySelector("input"),
    buttonAddTask = document.querySelector("button"),
    containerTasks = document.querySelector(".container-tasks");

let arrayOfTasks = [];

function buttonAddtasksToArray() {
    if (inputWriteTask.value.trim() !== "") {
        addValueInput(inputWriteTask.value.trim());
        inputWriteTask.value = "";
    }
};

buttonAddTask.addEventListener("click", buttonAddtasksToArray);
inputWriteTask.addEventListener("keydown", (e) => {
    if (e.key === "Enter") buttonAddtasksToArray();
});

function addValueInput(text) {
    const task = {
        id: Date.now(),
        title: text,
    };

    arrayOfTasks.push(task);
    createTasks(arrayOfTasks);
    addDataToLocaleStorage(arrayOfTasks);
};

function createTasks(arrayOfTasks) {
    containerTasks.innerHTML = "";
    arrayOfTasks.forEach(task => {
        const div = document.createElement("div");
        div.className = "task";
        containerTasks.appendChild(div);

        const inputText = document.createElement("input");
        inputText.type = "text";
        inputText.value = task.title;
        inputText.setAttribute("readonly", "");

        const editButton = document.createElement("button");
        editButton.className = "edit-btn";
        editButton.textContent = "edit";
        div.append(inputText, editButton);

        // 编辑/保存切换逻辑
        editButton.onclick = () => {
            if (inputText.hasAttribute("readonly")) {
                // 进入编辑状态
                inputText.removeAttribute("readonly");
                inputText.focus();
                editButton.textContent = "save";
            } else {
                // 保存编辑内容
                const updatedTitle = inputText.value.trim();
                if (updatedTitle) {
                    // 找到对应任务并更新title
                    const targetTask = arrayOfTasks.find(t => t.id === task.id);
                    if (targetTask) {
                        targetTask.title = updatedTitle;
                        createTasks(arrayOfTasks);
                        addDataToLocaleStorage(arrayOfTasks);
                    }
                } else {
                    // 如果内容为空，恢复原内容
                    inputText.value = task.title;
                }
                // 退出编辑状态
                inputText.setAttribute("readonly", "");
                editButton.textContent = "edit";
            }
        };

        // 支持失去焦点保存
        inputText.addEventListener("blur", () => {
            if (!inputText.hasAttribute("readonly")) {
                const updatedTitle = inputText.value.trim();
                if (updatedTitle) {
                    const targetTask = arrayOfTasks.find(t => t.id === task.id);
                    if (targetTask) {
                        targetTask.title = updatedTitle;
                        createTasks(arrayOfTasks);
                        addDataToLocaleStorage(arrayOfTasks);
                    }
                } else {
                    inputText.value = task.title;
                }
                inputText.setAttribute("readonly", "");
                editButton.textContent = "edit";
            }
        });

        // 支持回车保存
        inputText.addEventListener("keydown", (e) => {
            if (e.key === "Enter" && !inputText.hasAttribute("readonly")) {
                editButton.click(); // 触发保存逻辑
            }
        });
    });
};

function addDataToLocaleStorage(arrayOfTasks) {
    window.localStorage.setItem("data-task", JSON.stringify(arrayOfTasks));
};

// 初始化加载LocalStorage数据
if (localStorage.getItem("data-task")) {
    arrayOfTasks = JSON.parse(localStorage.getItem("data-task"));
    createTasks(arrayOfTasks);
}

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <script defer src="main.js"></script>
    <style>
        .container-tasks {
            display: grid;
            gap: 1em;
            margin-top: 1em;
        }

        .task {
            background-color: #ddd;
            padding: 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .task input {
            border: none;
            outline: none;
            background-color: transparent;
            font-size: 1rem;
        }

        .edit-btn {
            padding: 0.3em 0.8em;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入任务内容...">
    <button>add task</button>
    <div class="container-tasks"></div>
</body>
</html>

核心逻辑说明 #

1. 编辑状态切换：点击按钮时切换输入框的只读状态，同时改变按钮文本提示用户当前操作
2. 数据更新：保存时通过任务id精准找到数组中对应的任务对象，修改其title属性
3. 多方式保存：支持点击保存按钮、输入框失去焦点、按下回车三种保存触发方式，提升用户体验
4. 数据持久化：每次修改后重新调用addDataToLocaleStorage将最新数组同步到LocalStorage

内容的提问来源于stack exchange，提问作者Si mo Id