时间戳

首页 > 解决方案 > 如何在 JS 待办事项列表中使用本地存储？

javascript - 如何在 JS 待办事项列表中使用本地存储？

问题描述

我正在开发我的 JavaScript 待办事项列表项目，并希望将本地存储添加到我的代码中，因此我查看了 StackOverflow 和其他文档中的一些帖子，并使用 storage.setItem 和 storage.getItem 将其实现到我的代码中，如何实现本地存储功能到待办事项？

我实现的代码没有保存任何数据/检索任何数据。请检查我的 localStorage 代码是否正确？

我想将一个新添加的列表项添加到本地存储中，在刷新或重新打开浏览器时检索它，并在单击删除按钮时将其删除。

let input = document.querySelector('#todo')
let btn = document.querySelector('#btn');
let list = document.querySelector('#list');
let savedTasks = localStorage.getItem('tasks');

btn.addEventListener('click', () => {
  let txt = input.value;
  if (txt === "") {
    alert('Please write something to do!');
  } else {
    let li = document.createElement('li');
    li.innerHTML = txt;
    list.insertBefore(li, list.childNodes[0]);
    localStorage.setItem("tasks", "todos");
    input.value = '';
    const delBtn = document.createElement("i");
    delBtn.classList.add("fas", "fa-trash-alt");
    li.appendChild(delBtn);
    delBtn.addEventListener('click', e => {
      li.parentNode.removeChild(li);
      localStorage.removeItem("tasks");
    })
  }
})

list.addEventListener('click', e => {
  if (e.target.tagName == 'LI') {
    e.target.classList.toggle('checked');
  }
})

HTML

 <div class="todoList">
      <h1>To-do List</h1>
      <div class="add-element">
        <input type="text" id="todo" placeholder="Add new to-do">
        <button id="btn">Add</button>
      </div>
      <div class="element-list">
        <ul id="list"></ul>
      </div>
    </div>

标签： javascript

解决方案

localStorage 仅适用于字符串，因此您需要将列表转换为字符串并返回。这通常使用 JSON 来完成。

我已经玩过你的代码了，这是一个工作示例： https ://codesandbox.io/s/loving-waterfall-69zui ?file=/src/index.js

假设您有一个函数来获取待办事项文本并将其显示在 UI 上：

function addUIItem(txt) {
  let li = document.createElement("li");
  li.innerHTML = txt;
  list.insertBefore(li, list.childNodes[0]);
  const delBtn = document.createElement("button");
  delBtn.textContent = "x"; // a button needs some text, a  simple  "x" should do for a "Delete button"
  delBtn.classList.add("fas", "fa-trash-alt");
  li.appendChild(delBtn);
  delBtn.addEventListener("click", (e) => {
    li.parentNode.removeChild(li); // remove from the UI
    savedTasks = savedTasks.filter((e) => e !== txt); // remove the in-memory element
    localStorage.setItem("tasks", JSON.stringify(savedTasks)); // store the new list in localStorage
  });  
}

为了在页面刷新时恢复任务，您可以像这样从 localStorage 读取数据：

// read previous tasks. If no tasks were found, start with an empty list
let savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
// add UI elements for any saved task
savedTasks.forEach(addUIItem);

希望有帮助:)

谢谢@FZs 的建议。

推荐阅读