在页面刷新时保持列表切换状态

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]）。