Javascript 刷新页面时隐藏div_Javascript_Jquery

Javascript 刷新页面时隐藏div

javascript jquery

Javascript 刷新页面时隐藏div,javascript,jquery,Javascript,Jquery,我有这个，其中有一个“X”，它关闭，但在刷新页面时再次显示。我希望即使在刷新页面后也保持隐藏状态。我该怎么做我想在刷新页面时也隐藏它们 <div class="cookie"> <a href="#" class="cookie-close"> <span class="icon" onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNod

我有这个

，其中有一个“X”，它关闭

，但在刷新页面时再次显示。我希望

即使在刷新页面后也保持隐藏状态。我该怎么做

我想在刷新页面时也隐藏它们

<div class="cookie">
    <a href="#" class="cookie-close">
    <span class="icon" onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>X</span>
    </a>
</div>

如果希望每次加载页面时都隐藏div，只需按照@FunkDoc所说的操作并添加

display:none到您的css。如果希望仅在第一次加载页面时打开，则必须在本地保存详细信息：
 // Retrieve
 if(localStorage.getItem("visited") == null){

    document.getElementsByClassName('cookie')[0].style.display = 'none';
 }

 // Store
 localStorage.setItem("visited", "true");

JS Fiddle:
当用户单击x时，考虑将该选项存储到localStorage中
localStorage.setItem('showDiv', false)

希望这有帮助。。干杯
请考虑以下代码：
<body onload="onLoad()">
    <div id="myDiv" class="cookie" style="display: none">
        <a href="#" class="cookie-close">
        <span class="icon" onclick='onClose()'>X</span>
        </a>
    </div>

    <script>
        function onLoad() {
            var showDiv;
            if(localStorage.getItem("showDiv") == null) {
                showDiv = true;
            }
            else {
                showDiv = localStorage.getItem("showDiv")
            }

            if (showDiv) {
                 document.getElementById('myDiv').style.display = 'block';
            }
            else {
                document.getElementById('myDiv').remove();
            }
        }

        function onClose() {
            document.getElementById('myDiv').remove();
            localStorage.setItem("showDiv", false);
        }

    </script>
</body>


函数onLoad（）{
var-showDiv；
if（localStorage.getItem（“showDiv”）==null）{
showDiv=true；
}
否则{
showDiv=localStorage.getItem（“showDiv”）
}
if（showDiv）{
document.getElementById（'myDiv'）.style.display='block'；
}
否则{
document.getElementById（'myDiv'）.remove（）；
}
}
函数onClose（）{
document.getElementById（'myDiv'）.remove（）；
setItem（“showDiv”，false）；
}
您可以制作一个看起来有点像这样的脚本：
<div id="cookie_message" class="cookie" style="display: none;">
    <a href="#" class="cookie-close">
    <span class="icon" onclick="document.getElementById('cookie_message').style.display = 'none'; document.cookie = 'hideCookieMessage=true'; return false;">X</span>
    </a>
</div>
<script>
// checks if the cookie is NOT present, if not, then it shows the cookie message
if (!document.cookie.match(/^(.*;)?hideCookieMessage=[^;]+(.*)?$/)) {
   document.getElementById('cookie_message').style.display = 'block';
}
</script>


//检查cookie是否不存在，如果不存在，则显示cookie消息
如果（！document.cookie.match（/^（.*）？hideCookieMessage=[^；]+（.*））$/）{
document.getElementById（'cookie_message'）。style.display='block'；
}

它现在仅在未设置cookie hideCookieMessage时显示。请确保在后端检查cookie，如果cookie存在，甚至不要发送它。
添加cookie有一些与创建、读取和删除cookie相关的功能。有关详细信息，请查找此片段或下面的片段
我希望这对你有帮助

函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.toutString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i
正如Jersh和Adrian Bratu所说，您可以使用本地存储来存储div的状态（隐藏或不隐藏）
但是，我建议用饼干代替
cookie允许您有一个本地存储永久的到期日期。
无论出于何种原因，如果您使用localstorage对div进行了更改，希望用户最终看到这些更改，那么您必须清理它
这意味着，要么向存储中添加新数据（例如日期）
使用cookie，当到期日期过期时，div将再次自动显示，您只需在新cookie过期时设置一个新的cookie，并使用新的到期日期
实现非常类似：
document.cookie = "hidden=true; expires=Fri, 20 Jan 2017 23:59:59 GMT"

希望这对您有所帮助。
让它实际显示本地存储在这里或JSFIDLE中做您想做的事情是不确定的。如果单击X，则隐藏面板并在localStorage上保存变量。然后，当页面加载时，检查是否存在该变量。我还添加了一个“显示”按钮，以便您可以切换窗格。我在这里设置了一个测试页面

$（文档）.ready（函数（）{
log（“我得到了”+localStorage.getItem（“panelHidden”）；
if（localStorage.getItem（“panelHidden”）=“true”）{
$（“.panel”）.hide（）；
}否则{
$（“.panel show control”）.hide（）；
};
$（“.panel close control”）。打开（“单击”，函数（）{
//首先，关闭面板。。
$（“.panel”）.hide（）；
$（“.panel show control”）.show（）；
//然后，放一块饼干。
setItem（“panelHidden”、“true”）；
});
$（“.panel show control”）。打开（“单击”，函数（）{
//隐藏按钮。。。
$（this.hide（）；
$（“.panel”）.show（）；
//然后，解开饼干！
setItem（“panelHidden”、“false”）；
});
});
。面板关闭控制{
边框：1px纯黑；
背景色：#ccc；
字体系列：Arial，无衬线；
字体大小：9px；
浮动：对；
}
.小组{
边框：1px点红色；
}

X
设计师可以使用默认文本来模拟文本的外观。人类是有创造力的生物。但是，标准默认文本可以做到这一点。顺便说一下，你的设计看起来棒极了。我希望你喜欢这个假文本。和你在一起更好看
使用此文本。使用默认文本是一种创建内容外观的简单方法，无需创建内容。如果不是真正的文字，他们会把重点放在设计上。此文本将不会以一致的顺序显示。然而，标准违约
文本可以做到这一点
显示面板
只需将display:none添加到CSST中的.cookie此隐藏我的分区是否只需显示一次？我希望在单击“X”并关闭parentNode时显示一次，刷新页面后保留此选项closed@hersugjima我已经相应地更新了mmy的答案