在jquery點擊功能后保存當前狀態

Question

我試圖在單擊另一個按鈕后隱藏按鈕，但是當頁面刷新時，隱藏按鈕再次出現。 我想保持隱藏，即使我刷新頁面並僅在我點擊顯示按鈕時顯示它。 任何幫助將非常感激。

HTML：

<button type="button" class="showhide">Show / Hide</button>
<button type="button" class="link">Link</button>

JS：

$('.showhide').click(function(){
 $('.link').hide();
});

Answer 1

您可以使用localStorage通過以下代碼在客戶端處理它。 或者您需要在服務器腳本中使用sessionStorage。

if(localStorage.getItem('isHide'))
  $('.link').hide();
$('.showhide').click(function(){
  $('.link').hide();
  localStorage.setItem('isHide',true);
});

Answer 2

就像@Kartikeya所說，使用localStorage。

單擊按鈕時設置它。 在頁面加載時，檢查localStorage的值以更新按鈕的可見性。

$('.showhide').click(function(){
    $('.link').toggle();

    var isVisible = $('.link').is(":visible"); 
    localStorage.setItem('visible', isVisible);
});

// stored in localStorage as string, `toggle` needs boolean
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$('.link').toggle(isVisible);

https://jsfiddle.net/undm500w/8/

Answer 3

如果您希望按鈕在關閉瀏覽器后仍保持隱藏狀態，您應該考慮使用localStorage ，更多信息請點擊此處 ，否則我建議使用類似於會話的sessionStorage ，這意味着會話存儲中存儲的所有內容都將被刪除你關閉瀏覽器。 您可以在此處閱讀有關會話存儲的信息

基本上你需要使用兩個功能。 getItem和setItem 。 這是使用sessionStorage的演示，但也適用於localStorage ：

   $(document).ready(function(){
       if(sessionStorage.getItem('isBtnHidden')){
           $('.link').hide();
       }

       $('.link').click(function(){
          $('.link').hide();
          sessionStorage.setItem('isBtnHidden', true);
       });
   });