javascript - 在 localStorage 中保存待办事项-6ren

javascript - 在 localStorage 中保存待办事项

转载作者：行者123 更新时间：2023-12-01 15:59:06

24

4

我创建了一个待办事项应用程序，我想将待办事项保存在 localStorage 中.
我正在考虑添加 localStorage像这样的属性(property):

addForm.addEventListener("submit", (e) => {
    e.preventDefault();
    let todo = addForm.add.value.trim();
    if (todo.length) {
        localStorage.setItem(todo);
        generateTemplate(todo);
        addForm.reset();
    }
}

但是，它不起作用。
所以，我的问题是，最好在代码的哪一部分添加属性，在哪一部分添加 getItem 是最好的。方法？

这是没有 localStorage 的完整代码属性(property):

const addForm = document.querySelector(".add");
const list = document.querySelector(".todos");
const search = document.querySelector(".search input");

// generate new toDo's
const generateTemplate = (todo) => {
  let html = ` <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>${todo}</span><i class="far fa-trash-alt delete"></i>
  </li>`;
  list.innerHTML += html;
};

// submit the todo
addForm.addEventListener("submit", (e) => {
  e.preventDefault();
  let todo = addForm.add.value.trim();
  if (todo.length) {
    generateTemplate(todo);
    addForm.reset();
  }
});

// delete todo's

list.addEventListener("click", (e) => {
  if (e.target.classList.contains("delete")) {
    e.target.parentElement.remove();
  }
});

// filter the toDo's

const filterTodos = (term) => {
  Array.from(list.children)
    .filter((todo) => !todo.textContent.toLowerCase().includes(term))
    .forEach((todo) => todo.classList.add("filtered"));

  Array.from(list.children)
    .filter((todo) => todo.textContent.toLowerCase().includes(term))
    .forEach((todo) => todo.classList.remove("filtered"));
};

search.addEventListener("keyup", () => {
  const term = search.value.trim().toLowerCase();
  filterTodos(term);
});

body {
  background-color: #352f5b;
}

.container {
  max-width: 400px;
}

input[type="text"],
input[type="text"]:focus {
  color: #fff;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  max-width: 400px;
}

.todos li {
  background: #423a6f;
}

.delete {
  cursor: pointer;
}

.filtered {
  display: none !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>toDoList</title>
  <script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <header class="text-center text-light my-4">
      <h1 class="text-ligth mb.4">thingsToDo</h1>
      <form action="" class="search"><input type="text" class="form-control m-auto" name="search" placeholder="Search toDo's"></form>
    </header>
    <ul class="list-group todos mx-auto text-light"></ul>
    <form class="add text-center my-4">
      <label class="text-light">Add new toDo...</label>
      <input type="text" class="form-control m-auto" name="add">
    </form>
  </div>
  <script src="index.js"></script>
</body>

</html>

最佳答案

Storages 对象(与 LocalStorage 一起使用的对象)允许保存字符串(具体为 DOMStrings)，因此如果要保存 javascript 对象，应先将其转换为字符串(例如使用 JSON.stringify )
在您的代码中，setItem 的语法也是如此。是不正确的。您需要指定 a key that identifies the object

   localStorage.setItem('todo', todo);

请注意，这只会保存一个待办事项。因此，当您收到待办事项时，您需要执行 localStorage.getItem('todo')这当然只会返回您保存的最后一个待办事项。
对此的解决方案可能是为您的待办事项提供存储:

var todos = []

每次创建新的待办事项时，您都会将该待办事项添加到该对象

todos.push(todo)

并将其保存到本地存储

localStorage.setItem('todos', JSON.stringify(todos))

当您取回该列表时，您将需要 parse返回字符串以获取实际对象:

var todosString = localStorage.getItem('todos');
var todos = JSON.parse(todosString);

考虑到这只会将您的 todos 数据放入该 var。然后你需要重新填充你的 dom。
这可以通过重复使用您的 generateTemplate 来完成。功能。
例如。

todos.forEach(todo => generateTemplate(todo));

我还建议您查看 LocalStorage 的 MDN 页面: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
完整的工作示例的使用 Web 存储 API 页面: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

关于javascript - 在 localStorage 中保存待办事项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63839805/

24

4

0

文章推荐： javascript - JS 中的解码 URL 无法按预期工作

文章推荐： java - Java 中微分方程组的 Runge-Kutta (RK4)

文章推荐： java gui 帮助 Action 监听器

文章推荐： javascript - react + useState() + previousState

jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
python - 保存 django mongoengine 模型实例时无效的 EmbeddedDocumentField 项(保存()失败)
我正在尝试保存模型的实例，但我得到了 Invalid EmbeddedDocumentField item (1) 其中 1 是项目的 ID(我认为)。模型定义为 class Graph(Docum
iphone - 以 72 dpi 保存 UIImage(Retina 模拟器以 144 dpi 保存)
我有一个非常奇怪的问题......在我的 iPhone 应用程序中，用户可以打开相机胶卷中的图像，在我的示例中 1920 x 1080 像素 (72 dpi) 的壁纸。现在，想要将图像的宽度调整为例
Primefaces 保存/通过过滤数据表结果列表
目前，我正在使用具有排序/过滤功能的数据表成功地从我的数据库中显示图像元数据。在我的数据表下方，我使用第三方图像覆盖流( http://www.jacksasylum.eu/ContentFlow/
Javascript 保存、删除和重新加载输入值
我的脚本有问题。我想按此顺序执行以下步骤: 1. 保存输入字段中的文本。 2. 删除输入字段中的所有文本。 3. 在输入字段中重新加载之前删除的相同文本。我的脚本的问题是 ug()- 函数在我的文本
Laravel 保存/更新多对多关系
任何人都可以帮助我如何保存多对多关系吗？我有任务，用户可以有很多任务，任务可以有很多用户(多对多)，我想要实现的是，在更新表单中，管理员可以将多个用户分配给特定任务。这是通过 html 多选输入来完成
Tensorflow 保存/恢复批量归一化
我在 Tensorflow 中训练了一个具有批归一化的模型。我想保存模型并恢复它以供进一步使用。批量归一化是通过完成的 def batch_norm(input, phase): retur
唯一/保存/更新的Grails问题
我遇到了 grails 的问题。我有一个看起来像这样的域: class Book { static belongsTo = Author String toString() { tit
JavaScript - 保存、存储和更新数组
所以我正在开发一个应用程序，一旦用户连接(通过 soundcloud)，就会出现以下对象: {userid: userid, username: username, genre: genre, fol
Angular 保存/恢复组件状态
我正在开发一个具有多选项卡布局的 Angular 7 应用程序。每个选项卡都包含一个组件，该组件可以引用其他嵌套组件。当用户选择一个新的/另一个选项卡时，当前选项卡上显示的组件将被销毁(我不仅仅是隐
Java JTextPane 保存
我尝试使用 JEditorPane 进行一些简单的文本格式化，但随着知识的增长，我发现 JTextPane 更容易实现并且更强大。我的问题是如何将 JTextPane 中的格式化文本保存到文件？它应
Docker:保存 - 不产生输出
使用 Docker 相当新。我为 Oracle 11g Full 提取了一个图像。创建了一个数据库并将应用程序安装到容器中。正确配置后，我提交了生成 15GB 镜像的容器。测试了该图像的新容器，
ios - 将核心数据值传递到文本字段中以进行编辑/保存
我是使用 Xcode 和 swift 的新手，仍在学习中。我在将核心数据从实体传递到文本字段/标签时遇到问题，然后用户可以选择编辑和保存记录。我的目标是，当用户从 friendslistViewCon
java - 保存/加载具有依赖关系的对象的可靠方法？
我正在用 Java 编写 Android 游戏，我需要一种可靠的方法来快速保存和加载应用程序状态。这个问题似乎适用于大多数 OO 语言。了解我需要保存的内容:我正在使用策略模式来控制我的游戏实体。我
c++ - 保存/加载结构数组是个好主意吗？
我想知道使用 fstream 加载/保存某种结构类型的数组是否是个好主意。注意，我说的是加载/保存到二进制文件。我应该加载/保存独立变量，例如 int、float、boolean 而不是结构吗？我这么
c++ - 保存 QNetworkReply
我希望能够将 QNetworkReply 保存到 QString/QByteArray。在我看到的示例中，它们总是将流保存到另一个文件。目前我的代码看起来像这样，我从主机那里得到一个字符串，我想做的
Android 保存 Canvas
我正在创建一个绘图应用程序。我有一个带有 Canvas 的自定义 View ，它根据用户输入绘制线条: class Line { float startX, startY, stopX, stop
android - 保存 Intent
我有 3 个 Activity 第一个 Activity 调用第二个 Activity ，第二个 Activity 调用第三个 Activity 。第二个 Activity 使用第一个 Activi
ios - 保存 cookies ？
我想知道如何在 Xcode 中保存 cookie。我想使用从一个网页获取的 cookie 并使用它访问另一个网页。我使用下面的代码登录该网站，我想保存从该连接获得的 cookie，以便在我建立另一个连
ios - 保存/编辑重复日历事件的最佳方法
我有一个 SQLite 数据库存储我的所有日历事件，建模如下: TimerEvent *Attributes -date -dateForMark -reminder *Relat

首页

博学

6Ren·AI

商城

javascript - 在 localStorage 中保存待办事项