Javascript 即使在重新加载页面后也显示div

单击一个按钮，我将使用

document.getElementById('message-box').style.display="block";

但是当页面被重新加载时，这个div再次消失。我希望div保持不变，直到我使用

x

按钮显式关闭它。我如何才能做到这一点？

试试这个：

window.onload = function() {document.getElementById('message-box').style.display="block";};

试试这个：

window.onload = function() {document.getElementById('message-box').style.display="block";};

---

我不打算在这里编写代码，因为复制/粘贴会让开发人员变得懒惰，但我将告诉您如何解决这个问题

这里的问题是，您刷新页面，并且该div的状态被删除，因为它不是持久状态

一个解决方案是cookies或localStorage，如果按钮关闭或未关闭，您可以在其中设置变量

---

希望这有帮助。

我不打算在这里编写代码，因为复制/粘贴会让开发人员变得懒惰，但我将告诉您如何解决这个问题

这里的问题是，您刷新页面，并且该div的状态被删除，因为它不是持久状态

一个解决方案是cookies或localStorage，如果按钮关闭或未关闭，您可以在其中设置变量

---

希望这能有所帮助。

这个简单的示例将实现您想要实现的目标

html:

---

这个简单的例子将实现您想要实现的目标

html:

---

---

设置并检查cookie。有什么例子吗？没关系，我只是jsAs@nevermind的新手，他说你需要在cookie或localStorage中有一个变量。单击显示div的按钮时，将cookie或变量设置为true。并在单击x后设置为false。如果cookie或variable的值为true，则将其与底部Vassiliy的答案结合起来，在重新加载后显示div。您可以找到许多关于处理cookie和本地存储的教程和示例。设置并检查cookie。有什么例子吗？没关系，我只是jsAs@nevermind的新手，他说你需要在cookie或localStorage中有一个变量。单击显示div的按钮时，将cookie或变量设置为true。并在单击x后设置为false。如果cookie或variable的值为true，则将其与底部Vassiliy的答案结合起来，在重新加载后显示div。你可以找到许多关于处理cookie和本地存储的教程和示例。这甚至会在单击之前发生，我想他希望它只在单击之后发生。div应该只在单击按钮之后显示。但即使重新加载后也应该保持打开，除非关闭。哦，对不起。最好的方法是nevermind在评论中写道的cookie。这种情况甚至会在单击之前发生，我想他希望它只在单击之后发生。div应该只在单击按钮之后显示。但即使重新加载后也应该保持打开，除非关闭。哦，对不起。最好的方法是像nevermind在评论中写的那样使用cookie。好的，我知道我必须为此存储cookie（bool变量）。但是当页面重新加载并且我得到cookie值时，现在我将如何再次显示相同的div？嘿，我想您必须使用JavaScript document.onload=function（）{}或jQuery.ready（）检查页面加载。当你确定条件正确时，你就应用这种风格。最好使用本地存储，我会在着手制作cookies之前三思而后行，这取决于OP需要处理什么样的浏览器支持，如果是某种史前浏览器，那么我会选择cookies.：）好的，我知道了，我必须为此存储cookie（bool变量）。但是当页面重新加载并且我得到cookie值时，现在我将如何再次显示相同的div？嘿，我想您必须使用JavaScript document.onload=function（）{}或jQuery.ready（）检查页面加载。当你确定条件正确时，你就应用这种风格。最好使用本地存储，我会在着手制作cookies之前三思而后行，这取决于OP需要处理什么样的浏览器支持，如果是某种史前浏览器，那么我会选择cookies.：）您的示例适用于fiddle，但不适用于我的laravel应用程序。奇怪：/这是我的html

{{$user->name}

JS

函数openMessageBox（elem）{document.getElementById（'message-box'）.style.display=“block”sessionStorage.setItem（'clicked'，true）；}

我的函数也收到一个参数，这可能是问题所在？正在设置和取消设置会话值，但重新加载页面后，div不会显示。是否添加了“window.onload”功能？当然，您不能在onload函数中使用'this'，还请注意'getSession'将返回一个字符串，而不是布尔值。是的，我添加了

窗口。onload

函数，但正如我所说，我的函数接收一个参数（对象的当前引用），因此我们必须传递该参数来调用该函数。这就是问题所在。您的示例适用于fiddle，但不适用于我的laravel应用程序。奇怪：/这是我的html

{{$user->name}

JS

函数openMessageBox（elem）{document.getElementById（'message-box'）.style.display=“block”sessionStorage.setItem（'clicked'，true）；}

我的函数也收到一个参数，这可能是问题所在？正在设置和取消设置会话值，但重新加载页面后，div不会显示。是否添加了“window.onload”功能？当然，您不能在onload函数中使用'this'，还请注意'getSession'将返回一个字符串，而不是布尔值。是的，我添加了

窗口。onload

函数，但正如我所说，我的函数接收一个参数（对象的当前引用），因此我们必须传递该参数来调用该函数。这就是问题所在。

function openClick() {
    document.getElementById('hiddenDiv').style.display = "block";
    sessionStorage.setItem('clicked', true);
}

function closeClick() {
    document.getElementById('hiddenDiv').style.display = "none";
    sessionStorage.removeItem('clicked');
}

window.onload = function () {
    var data = sessionStorage.getItem('clicked');
    if (data == 'true') {
        openClick();
    }
};