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

Question

我正在为我父亲的老板做一个项目。我使用 HTML、JS 和 CSS 创建了一个待办事项列表。我真的不知道如何制作它，以便他输入的内容列表自动保存，这样如果他关闭文件，当他打开它时列表仍然存在我不希望任何人为我编写代码。我不希望任何人为我编写代码，因为我真的很想学习如何更有效地思考这些事情，但如果有人可以帮助我了解我需要做什么，我将不胜感激。

Answer 1

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

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

关于 cookie 和 localstorage 的写入和读取有很好的参考资料。

本地存储

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

localStorage.setItem('myCat', 'Tom');

...

var cat = localStorage.getItem('myCat');

饼干

见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 或隐身模式下打开页面）。

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

Answer 2

看起来您想要做的是一个能够存储信息的Web 应用程序，在这种情况下，您的信息就是您提到的 TODO 列表。例如，您可以将此信息存储在数据库或 .txt 中。之后，下一步是填写您每次加载 html 页面时创建的列表，要保存新信息，您可以在 js 中设置一个事件，将信息保存在后台。当然，要做到这一切，您需要对我提到的关键点进行一些研究。