如何添加本地存储到更新/编辑的文本?

Question

我已经成功地将本地存储添加到addToDo函数。因此，当添加todo项时，将为每个项设置并检索本地存储(codepen中的第33行)。但是，我不知道如何将相同的本地存储功能添加到更新的项目文本中。注意:要更新项目，用户在文本区输入后单击项目。

如果我在createTodoText函数中添加addToLocalStorage函数，在itemText返回之前，它不工作。如果可能的话，我还需要为复选框状态和删除状态添加本地存储，因为我确信它们是相似的。这是我尝试过的代码。

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;
//update todo item when user clicks away
itemText.addEventListener('blur', (e) => {
todo.name = e.currentTarget.value;
});
//addToLocalStorage(todos)
return itemText;
};
const addToLocalStorage = (todos) => {
localStorage.setItem('todos', JSON.stringify(todos));
renderTodos(todos);
}
const getFromLocalStorage = () => {
const reference = localStorage.getItem('todos');
if (reference) {
todos = JSON.parse(reference);
renderTodos(todos);
}
}
getFromLocalStorage();

Answer 1

这很简单，只需将addToLocalStorage函数添加到事件侦听器回调函数中即可。
createTodoText在todo列表渲染时运行，您想要更新本地存储，您需要在todo项目更新后这样做，这是在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;
//update todo item when user clicks away
itemText.addEventListener('blur', (e) => {
todo.name = e.currentTarget.value;
addToLocalStorage(todos);
});
return itemText;
};

和我已经更新了codependency。
如果你有其他问题，请留下评论