javascript - 使用 vanilla javascript 删除本地存储项

Question

我正在使用 vanilla js 处理一个简单的待办事项列表。我已设法将输入添加到本地存储，但无法将样式更改(选中删除线)添加到本地存储，也无法弄清楚如何一次从存储中删除一项。我已经能够清除所有，只是无法分别删除每个项目。以下是我的代码，非常感谢任何建议。

//local storage setup
let saved = window.localStorage.getItem(input.value);

if (saved) {
    list.innerHTML = saved;
}

//handle input submit
function handleSubmitForm(e) {
    e.preventDefault();
    let input = document.querySelector('input');
    if (input.value != '') {
        addTodo(input.value);
    }
    input.value = '';
    window.localStorage.setItem(input.value, list.innerHTML);
}

//check off todo
function checkTodo(e) {
    let item = e.target.parentNode;
    if (item.style.textDecoration == 'line-through') {
        item.style.textDecoration = 'none';
    } else {
        item.style.textDecoration = 'line-through';
    }
    window.localStorage.setItem(item);
}

//delete todo
function deleteTodo(e) {
    let item = e.target.parentNode;
    item.addEventListener('transitionend', function () {
        item.remove();
    });
    item.classList.add('todo-list-item-fall');
    window.localStorage.removeItem(item);
}

Answer 1

JavaScript Storage是一个键值对。只需使用基于字符串的 key ，您就可以轻松地删除、编辑或阅读它。

// Set todo item
localStorage.setItem("todo1", "Stand-up meeting 9.15am");
// Read todo item
localStorage.getItem("todo1");
// Delete todo item
localStorage.removeItem("todo1");

最好能保存为 JSON string因为您可以将其标记为已完成而不删除，因此您也可以找到已完成的任务。

// Saving todo item as a JSON string
localStorage.setItem("todo1", JSON.stringify({ text: "Stand-up meeting 9.15am", completed: false }));

// Read it
const todo = JSON.parse(localStorage.getItem("todo1"));

// You can read the text
console.log(todo.text);
// Also you can mark it as completed and save it back
todo.completed = true;
localStorage.setItem("todo1", JSON.stringify(todo));