Todo 应用程序：将待办事项进出本地存储

Question

我试图让一个待办事项应用程序从 localstorage 运行，但不太明白它是如何完成的。该应用程序通过一个 Vue.js 项目和一个 main.js 文件工作，其中它由两个类 link 编辑在一起：App.js 和 Todo.js（观看下面）。

import App from "./classes/App.js";
const app = new App();

这是我的发现列表：

我只能将我添加的待办事项之一放入我的存储空间吗？
我似乎无法从我的存储中 return 它？而且当我重新加载页面时它不是正在加载。

提前谢谢大家，如果我能明白这一点，意义重大！

我将添加我的 CodeSandbox link，因为这样看起来会更整洁。 Link to my CodeSandbox

下面是两个 js 文件： App.js

import Todo from "./Todo.js";

export default class App {
  constructor() {
    console.log("");
    this.setupEventListeners();
    this.loadFromStorage();
  }

  setupEventListeners() {
    console.log("");
    document
      .querySelector("#add-item-text")
      .addEventListener("keyup", this.createItem.bind(this));
  }

  createItem(e) {
    if (e.key === "Enter") {
      console.log("");
      let inputText = document.querySelector("#add-item-text").value;
      let todo = new Todo(inputText);
      todo.add();
      todo.saveToStorage();
      this.reset();
    }
  }

  loadFromStorage() {
    const ref = localStorage.getItem("todo");
    if (ref) {
      todo = JSON.parse(ref);
    }
  }

  reset() {
    document.querySelector("#add-item-text").value = "";
  }
}

Todo.js

    export default class Todo {
  constructor(title) {
    this.title = title;
  }

  createElement() {
    let li = document.createElement("li");
    li.innerHTML = this.title;

    if (li.innerHTML.includes("high:")) {
      li.classList.add("prior-high");
    } else if (li.innerHTML.includes("medium:")) {
      li.classList.add("prior-medium");
    } else if (li.innerHTML.includes("low:")) {
      li.classList.add("prior-low");
    } else {
      li.classList.add("prior-medium");
    }

    li.addEventListener("click", this.markDone);
    return li;
  }

  markDone(e) {
    if (document.querySelector("li").classList.contains("done")) {
      document.querySelector("li").remove();
      window.localStorage.removeItem("li");
    } else {
      document.querySelector("li").classList.add("done");
    }
  }

  add() {
    let todo = this.createElement();
    document.querySelector("#todo-list").appendChild(todo);
  }

  saveToStorage() {
    let myStorage = window.localStorage;

    myStorage.setItem("todo", JSON.stringify(this.title));
  }
}

Answer 1

当您执行 myStorage.setItem("todo", JSON.stringify(this.title)) 时，您仅将标题保存在 localStorage 中的 "todo" 键处。如果您稍后再次调用同一行代码，您将覆盖该值。

如果您要保存 TODO 项目标题，它们都需要自己的密钥：

myStorage.setItem("todo-key1", todo1.title)

你可以将它们全部保存为 collection:

myStorage.setItem("todos", JSON.stringify([todo1.title, todo2.title]))

但是添加新的待办事项涉及在设置之前读取现有值：

myStorage.setItem("todos", JSON.stringify(JSON.parse(myStorage.getItem("todos")).push(newTitle)))

当然，辅助函数可以使这一切更容易阅读和更清晰。

Todo 应用程序：将待办事项进出本地存储

Todo app: getting todo-items in and out of localstorage

javascript

vue.js

local-storage