javascript - 将用户输入 (ul) 存储在待办事项列表中，以便在重新打开程序时显示该列表

Question

我正在为我父亲的老板做一个项目。我使用 HTML、JS 和 CSS 创建了一个待办事项列表。我真的不知道如何制作它，以便他输入的内容列表自动保存，这样如果他关闭文件，当他打开它时列表仍然存在

我不想让任何人为我编写这个代码。我不想让任何人为我编写代码，因为我真的想学习如何更有效地思考这些事情，但如果有人可以帮助我了解我需要做什么，我将不胜感激。

Answer 1

听起来您的应用程序不涉及任何服务器端逻辑，因此我只讨论客户端选项:

当待办事项列表发生更改时，您需要存储内容并在重新访问/加载页面时再次加载它。因此，您基本上可以选择将数据保存到 cookie 或本地存储。 Cookie 旨在保存客户端的小数据，并在每次请求时将该数据传输到服务器。 Cookie 在被删除之前通常也有有限的生存时间。Localstorage 可以在客户端存储更大的数据，不会随每个请求发送到服务器，并且通常不会像 cookie 那样快速删除。所以我想我更喜欢使用本地存储。

有关于写入和读取 cookie 和本地存储的很好的引用。

本地存储

参见https://developer.mozilla.org/de/docs/Web/API/Window/localStorage

localStorage.setItem('myCat', 'Tom');
...
var cat = localStorage.getItem('myCat');

Cookie

参见https://www.w3schools.com/js/js_cookies.asp

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
...
var x = document.cookie;

但是您应该明白，只要您依赖将数据保存到客户端，数据将在其他浏览器中不可用(例如，您在 Chrome 中工作，现在在 Firefox 或在隐身模式下)。

因此，从长远来看，您应该考虑在服务器端传输和保存数据。如果您坚持使用纯客户端方法，我建议您实现将待办事项列表保存为下载的选项。否则删除浏览器数据可能会导致您的所有待办事项列表丢失。