有没有办法在刷新时以相同状态加载HTML？

Question

比方说，我有一个包含多个隐藏div的HTML页面，并且我使用javascript函数来相应地隐藏和显示这些div。

当用户刷新网页时，它将返回到原始状态。我不希望这种情况发生。有什么办法在刷新时加载相同的状态吗？

Answer 1

您可以使用cookie或HTML Web Storage保存输入值。然后在页面加载时检查您存储的值。 HTML Web Storage较新，并且IMO易于使用。

有两种不同类型的网络存储。

• window.localStorage-存储没有到期日期的数据
• window.sessionStorage-存储一个会话的数据（关闭浏览器选项卡时数据丢失）

基础

Web存储存储在键/值对中。

localStorage.setItem("lastname", "Smith"); // Store

document.getElementById("result").innerHTML = localStorage.getItem("lastname"); // Retrieve

localStorage.removeItem("lastname"); Delete

就这么简单。这是有关HTML Web Storage的更多信息。基本上，您要做的就是为要保存其状态的每个项目创建一个Web存储项目。然后，在显示/隐藏项目的JS函数中，只需更新状态即可。

仅供参考

您可以通过转到应用程序>存储，在chrome的工具栏中查看本地存储。

Answer 2

您可以使用浏览器cookie或浏览器存储来保存密钥，这样您就可以知道用户先前选择的状态并显示该状态。

JavaScript Cookies

还有许多用于管理cookie的软件包：

js-cookie

以下是Stackoverflow上的一些示例：

How do I create and read a value from cookie?

Set cookie and get cookie with JavaScript