保存项目列表并使用javascript / jquery显示它们的简单方法

Question

假设我要加载带有文本框的html页面，“添加”和“删除”按钮以及下面的空文本字段。

如果我输入“Sally”并单击“添加”按钮，则“Sally”会出现在下面的文本字段中。 然后我输入“Greg”并点击添加按钮，“Greg”出现在Sally下面。 然后我输入“Sally”并单击“删除”按钮，只有“Greg”保留在文本框中。

我希望“Greg”仍然是我稍后关闭并重新打开页面时文本框中显示的唯一项目。

最有效的方法是序列化（）文本框中输入的项目，然后反序列化它们以显示它们？或者有更好/更有效的方法来做到这一点。

编辑：此方法需要使用SQL数据库/等离线。不是一种选择。

Answer 1

一种选择是将此信息存储在localstorage。

中

每次用户按下添加或删除按钮后，您：

1. 更新您的JS数组（添加项目，删除 项目，如果它存在，等）
2. 直观地更新显示数组项的文本字段。
3. 序列化阵列并将其保存到本地存储（如果您点击上面的链接，您可以看到该怎么做）
4. 在页面加载时，从localstorage重新加载序列化数组，对其进行反序列化，将其保存到页面上的变量，然后直观地更新显示数组项的文本字段。