javascript - JavaScript中页面加载时如何使用localStorage防止树形视图崩溃

Question

我想使用 localStorage 来防止在 JavaScript 中加载页面时树视图的崩溃。我试图通过以下方式做到这一点 - 但它没有成功。那么我该如何解决这个问题呢？->

{{#each menu}}
  <ul id="myUL">
    <div class="menu-text">
      <li>
        <span class="caret treeparent ripple">Data<i class="fas fa-chevron-down arrow"></i></span>
        <ul class="nested nav nav-pills flex-column tog">
          {{#each this}}
          <li rel="{{@index}}" class="nav-item">
            <a href="/page">Data</a>
          </li>
          {{/each}}
        </ul>
      </li>
    </div>
  </ul>
{{/each}}

Javascript：

$("#myUL ul.tog li a").click( function() {
  var value = $(this).parent("li").attr("rel");
  $("#myUL ul.main li").removeClass("highlight");
  $(this).parent("li").addClass("highlight");
  localStorage.setItem('pms' , JSON.stringify(value));

  console.log('Stored menu: ' + value);
});

var retrievedObject = JSON.parse(localStorage.getItem('pms'));
if(retrievedObject) {
  $("#myUL ul.tog li[rel=" + retrievedObject + "] ul").slideToggle();
  $("#myUL ul.tog li").removeClass("highlight");
  $("#myUL ul.tog li").find("span.current-page").remove();
  $("#myUL ul.tog li[rel=" + retrievedObject + "]").addClass("highlight").append("<span class=\"current-page\"></span>");

  $("#myUL ul.tog li li").removeClass("highlight");
  $("#myUL ul.tog li li").find("span.current-page").remove();
}        

现场重现问题-->

https://jsfiddle.net/aw9thf3b/1/

标签： javascriptjquery

Answer 1

<ul id="myUL">
    <div class="menu-text">
        <li>
            <span class="caret treeparent ripple">Menu 1<i class="fas fa-chevron-down arrow"></i></span>
            <ul class="nested nav nav-pills flex-column tog">
                <li class="nav-item" data-rel="data-rel">
                    <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:window.location.reload(true">Sub 2</a>
                </li>
            </ul>
        </li>
        <li>
            <span class="caret treeparent ripple">Menu 2<i class="fas fa-chevron-down arrow"></i></span>
            <ul class="nested nav nav-pills flex-column tog">
                <li class="nav-item">
                    <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
                </li>
            </ul>
        </li>
    </div>
</ul>

var openedTreeLiIndex = JSON.parse(localStorage.getItem('openedTreeLiIndex')) || [];
    restoreOpenedTreeIndex();
    $(".treeparent").click(function () {
        var $tog = $(this).next('.tog');
        $tog.slideToggle();
        if ($tog.hasClass('open')){
            $tog.removeClass('open');
        }else{
            $tog.addClass('open');
        }
        $(".arrow", this).toggleClass('flip');
        storeOpenTreeIndex();
    });

    function storeOpenTreeIndex() {
        var liItems = $('.menu-text > li');
        var counter = liItems.length;
        $(liItems).each(function (index, li) {
            var nestedUl = $(li).find('ul.open');
            if (nestedUl.length > 0) {
                if (openedTreeLiIndex.indexOf(index) === -1) {
                    openedTreeLiIndex.push(index);
                }
            } else {
                openedTreeLiIndex = openedTreeLiIndex.filter(function (item) { return item !== index; });
            }

            if (!--counter){
                localStorage.setItem('openedTreeLiIndex', JSON.stringify(openedTreeLiIndex));
            }
        });
    }

    function restoreOpenedTreeIndex() {
        var liItems = $('.menu-text > li');
        var counter = liItems.length;
        $(liItems).each(function (index, li) {
            if (openedTreeLiIndex.indexOf(index) !== -1) {
                $(li).find('ul').addClass('open').css({ display: 'block' });
            }
        });
    }

jsfiddle