2016-09-27 33 views
-3

在頁面加載後在javascript中存儲值?

$("#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後顯示圖像();顯示新圖像並隱藏舊圖像。 但在頁面刷新時重置。

請給我一個方法來解決它。

工作代碼與我的ids將被讚賞!

+0

'localStorage'可以提供一個解決方案 – depperm

+0

我不知道如何使用它@depperm – monemacu

+1

http://stackoverflow.com/questions/16206322/how-to-get-js -variable-to-retain-value-after-page-refresh – epascarello

回答

0

查看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(); 
    } 
}); 
+0

thanx所以mch像一個魅力工作..也如何重置存儲..在例子clearstorage不工作! – monemacu

+0

沒問題,它總是很高興幫助:]嗯,奇怪它爲我工作。如果您重新加載而不點擊它,則div被隱藏,但是當您單擊按鈕(清除存儲)並重新加載div時應該回來。 – Mihailo

+1

@monemacu你可以使用'localStorage.removeItem(「你想刪除的localStorage變量的名稱」);'從localStorage中刪除。 –

1

嘗試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); 
    }); 
}); 
+0

爲我提供瞭如何在編碼中實現它 – monemacu

+0

我已更新我的答案,請檢查如何使用localStorage。如果您仍然發現任何問題,請告訴我。 –

+1

將重複的代碼移動到一個方法中,以便更清晰。並且您可能想要說明代碼需要在主體底部生存還是使用文檔準備工作 – epascarello

-1

你可以使用cookies如同用戶在頁面加載點擊調用相同。

除此之外,你有點不幸。頁面刷新意味着重置頁面的JavaScript。

-1

我希望下面的代碼將幫助你。只需將代碼放入加載事件並解決問題即可。

$(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>

+0

這不是OP要求.... – epascarello

相關問題