ページロード後の値はjavascriptに格納されますか？

Question

$("#divid1").click(function(){ 
 
    $("#divid1").hide(); //want this to keep hidden after refresh 
 
    $("#hideid1").hide(); //want this to keep hidden after refresh 
 
    $("#id1").show(); //want this to keep showing after refresh 
 
});

.hide{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="/img/done.png" id="divid1" alt="divid1"/> 
 
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" /> 
 
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>

私はonclickのページの負荷、後の画像を表示しようとしています（）;新しい画像を表示し、古い画像を隠す。 ただし、ページの更新時にリセットされます。

親切に私にそれを解決する方法を教えてください。

私のIDを使用した作業コードは高く評価されます！

Answer 1

Exampleをチェックしてください。これで十分なはずです。

JS

$("#divid1").click(function(){ 
    $("#divid1").hide(); //want this to keep hidden after refresh 
    $("#hideid1").hide(); //want this to keep hidden after refresh 
    $("#id1").show(); //want this to keep showing after refresh 
    localStorage.setItem('hidden', true); 
}); 

$(function() { 
    // if localStorage has hidden as true, hide the div and show other 
    if(localStorage.getItem('hidden')){ 
    $("#divid1").hide(); 
    $("#hideid1").hide(); 
    $("#id1").show(); 
    } 
}); 

Answer 2

Try localStorage

設定項目

localStorage.setItem('selectedId', 100); 

アイテムをゲット

localStorage.getItem('selectedId'); 

最後に、削除項目

localStorage.removeItem("selectedId"); 

例

$(document).ready(function(){ 
    //Function for events 
    function dummyFunction(){ 
     $("#divid1").hide(); //want this to keep hidden after refresh 
     $("#hideid1").hide(); //want this to keep hidden after refresh 
     $("#id1").show(); //want this to keep showing after refresh 
    } 
    //Check localStorage value 
    if(localStorage.setItem('itemClicked') == 1) 
    { 
     dummyFunction(); 
    } 
    //Div click event 
    $("#divid1").click(function(){ 
     dummyFunction(); 
     //Set localStorage 
     localStorage.setItem('itemClicked', 1); 
    }); 
}); 

Answer 3

あなたは、ユーザーがページのロードをクリックしたかのように同じことを呼び出すためにクッキーを使用することができます。

それ以外の場合は、あなたはちょっと幸運です。ページの更新は、ページのjavascriptをリセットするためのものです。

Answer 4

私はコードがお手伝いします次のよう願っています。ちょうどロードイベントと問題解決のコードを入れてください。

$(window).load(function(){ 
 
    $("#divid1").hide(); 
 
    $("#hideid1").hide(); 
 
    $("#id1").show(); 
 
});

.hide{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="/img/done.png" id="divid1" alt="divid1"/> 
 
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" /> 
 
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>