在頁面刷新時保持列表切換狀態

Question

我很難做到這一點，以便登錄用戶隱藏菜單的某個部分，以便在會話期間保持這種狀態。

$(document).ready(function() { 
    $('h1.tree-toggler').click(function() { 
    $(this).parent().children('ul.tree').toggle(300); 
    }); 
}); 

有了這個HTML：

<div> 
    <h1 class="tree-toggler">Heading</h1> 
    <ul class="tree"> 
    <a href="#"><li>Link 1</li></a> 
    <a href="#"><li>Link 2</li></a> 
    <a href="#"><li>Link 3</li></a> 
    <a href="#"><li>Link 4</li></a> 
    <a href="#"><li>Link 5</li></a> 
    </ul> 
</div> 

撥動完美的作品，但是當你改變頁面不留喜歡它。

如何讓它保持在下一頁的切換方式？

Answer 1

您可以按照鏈接：How to get JS variable to retain value after page refresh?

您還可以使用下面的代碼爲你的目的：

$(document).ready(function() { 
    if(localStorage.getItem("toggleState") == "1") 
    $('ul.tree').hide(); 

    $('h1.tree-toggler').click(function() { 
    var ts = localStorage.getItem("toggleState"); 
    if(ts == null || ts == "0") { 
      var tv = "1"; 
      localStorage.setItem("toggleState", tv); 
     }else { 
     var tv = "0"; 
      localStorage.setItem("toggleState", tv); 
    } 
    $(this).parent().children('ul.tree').toggle(300); 
    }); 
}); 

Answer 2

您可以使用localStorage API來保存本地數據。

$(document).ready(function() { 

    let storage = localStorage || sessionStorage; 

    // let $component = $(document.getElementById('component')); 

    if (storage) { 
     let state = JSON.parse(storage.getItem('state')); 

     if (state) { 
      $('h1.tree-toggler').trigger('click'); 
      // $component.toggle(300); 
     } 
    } 

    $('h1.tree-toggler').click(function() { 
     if (storage) { 
      storage.setItem('state', (!JSON.parse(storage.getItem('state')) || true)) 
     } 
     $(this).parent().children('ul.tree').toggle(300); 
    }); 
}); 

您可以切換元件（$component）手動或觸發你已經擁有的事件（h1.tree-toggler[click]）。