私は<div>を持っています。ここには<div>を閉じる "X"がありますが、ページを更新すると再び表示されます。私は<div>がページをリフレッシュした後でも隠されたままにしておきたい。どうやってやるの？hide divを更新するとき
ページが更新されたときにも非表示にしたい
<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>
は、はとは、詳細については、このfiddle以下のスニペットを見つけてくださいクッキーを削除READ CREATE に関連するいくつかの機能がありますクッキーを追加します。 JershとエイドリアンBratuが言ったように、あなたはdiv要素の状態を保存するためにlocalstorageを使用することができ
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toUTCString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
$(function(){
if(readCookie('CodefireOnce') == null)
{
$(".cookie").css("display","block");
}
$("body").on("click",".icon",function(){
$(this).closest("div.cookie").remove();
createCookie('CodefireOnce','true',7);
});
});<div class="cookie" style="display:none;">
<a href="#" class="cookie-close">
<span class="icon">X</span>
</a>
</div>@hersu gjimaは、将来の参照のためにも、あなたが他人に役立つだろうと思っているならば、答えを投票してください – Curiousdev
あなたはdiv要素がちょうど@FunkDocが言ったように行うと、あなたのCSSにdisplay:none;を追加し、毎回ページがロードを非表示にする場合。あなたはそれはあなたがページをロードする最初の時間にだけ開くようにしたい場合は、ローカルで詳細を保存する必要があります。
// Retrieve
if(localStorage.getItem("visited") == null){
document.getElementsByClassName('cookie')[0].style.display = 'none';
}
// Store
localStorage.setItem("visited", "true");
は、ときにユーザーがクリックする、のlocalStorageにオプションを格納考えてみましょうオンx。
<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>
それを：あなたは少し、このようになりますスクリプトを作ることができ
<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>
：
localStorage.setItem('showDiv', false)
希望は、これが...助け歓声
次のコードを考えてみてください。 cookie hideCookieMessageが設定されていない場合にのみ表示されます。バックエンドでもクッキーをチェックインし、クッキーが存在する場合はそれを送信しないでください。
私はそれはあなたを助けるいただければ幸い
..（非表示にしたりしません） 。
しかし、代わりにクッキーを使用することをお勧めします。
cookieを使用すると、localstorageが永続的である有効期限を持つことができます。 何らかの理由でdivを変更して、最終的にユーザーに表示させたい場合は、localstorageを使用して、その項目を消去する必要があります。
これは、新しいデータ（日付など）をストレージに追加することを意味します。
クッキーを使用すると、有効期限が切れるとdivが自動的に表示され、有効期限が切れた新しい有効期限の新しいクッキーを設定するだけで済みます。
実装は非常に似ています：
document.cookie = "hidden=true; expires=Fri, 20 Jan 2017 23:59:59 GMT"
あなたは、このヘルプを願っています。
@MichaelMiorはこの質問で指摘した：http://stackoverflow.com/questions/41703915/how-to-do-to-do-do-do-do-list /そのローカルストレージはCookieより長く続くことはできませんが、この場合は不要なのでブラウザリクエストと共に送信されます。 – Jersh
私はそれを知りませんでした。ありがとう@Jersh;） – Elhebert
私はちょうど同様にそれを発見した。私は自分のPHPアプリケーションでクッキーを使うことができましたが、代わりに$ _SESSION変数とポストリクエストを使いました。 – Jersh
実際にローカルストレージを表示させるには、ここで、またはjsfiddleで必要なものをiffyにします。何が起こるかは、Xをクリックするとパネルを非表示にして変数をlocalStorageに保存することです。次に、ページが読み込まれると、その変数の存在をチェックします。また、「表示」ボタンを追加して、ペインを切り替えることができます。私はhttps://snowmonkey.000webhostapp.com/cookieThing.html
$(document).ready(function(){
console.log("I've got "+localStorage.getItem("panelHidden"));
if(localStorage.getItem("panelHidden") == "true"){
$(".panel").hide();
} else {
$(".panel-show-control").hide();
};
$(".panel-close-control").on("click", function(){
// First, close the panel..
$(".panel").hide();
$(".panel-show-control").show();
// then, set a cookie.
localStorage.setItem("panelHidden", "true");
});
$(".panel-show-control").on("click", function(){
// hide the button...
$(this).hide();
$(".panel").show();
// then, unset the cookie!
localStorage.setItem("panelHidden", "false");
});
});.panel-close-control {
border: 1px solid black;
background-color: #ccc;
font-family: Arial, sans-serif;
font-size: 9px;
float: right;
}
.panel {
border: 1px dotted red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<span class="icon panel-close-control">X</span>
<div class="pane-contents">
<p>A designer can use default text to simulate what text would look like. Humans are creative beings. However, standard default text can do the trick. Your design looks awesome by the way. I hope you enjoyed the fake text. It looks even better with you
using this text. Using default text is a simple way to create the appearance of content without having to create it. If it is not real text, they will focus on the design. This text will not appear in a consistent order. However, standard default
text can do the trick.</p>
</div>
</div>
<button class="panel-show-control">
Show the panel
</button>
だけの表示を追加し、ここでテストページを設定しました：どれもあなたのCSS –
に.cookieないように、これは私のダイビング –
を隠しあなたは一度だけ表示されますする必要がありますか？ – IsuruAb