How to use localStorage to prevent the collapse of the tree view when page loading in JavaScript

user_13473295 0
Viewed 96

I want to use localStorage to prevent the collapse of the tree view when page loading in JavaScript. I have tried to do that in the following way -But it was not successful. So how can I fix this? ->

{{#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();
}

reproduce the problem live -->

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

jquery javascript
2 Answers
<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

user_13359990

You need to get selected a then get its parent ul and perform click on sibling span of ul. Below is the code for same.

Also wrap your code inside $(document).ready so click would perform after necessary scripts are initialized.

// add code to $(document).ready so click would perform after necessary scripts are initialized
$(document).ready(function() {
  var retrievedObject = JSON.parse(localStorage.getItem('pms'));
  if (retrievedObject) {
    // get parent ul of selected a
    let ul = $("#myUL ul.tog li[rel=" + retrievedObject + "] a").closest('ul');
    // get sibling span and trigger click
    ul.siblings('span').click();
  }
});

P.S. Please note in your fiddle you are having rel="0" for two li so when retrievedObject = 0 then it will expand both. Make sure you will have unique value for rel then it would work perfectly.

Your complete code would be like below.

$(".treeparent").click(function() {
  $(this).next('.tog').slideToggle();
  $(".arrow", this).toggleClass('flip');
});

$("#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);
});

// add code to $(document).ready so click would perform after necessary scripts are initialized
$(document).ready(function() {
  var retrievedObject = JSON.parse(localStorage.getItem('pms'));
  if (retrievedObject) {
    // get parent ul of selected a
    let ul = $("#myUL ul.tog li[rel=" + retrievedObject + "] a").closest('ul');
    // get sibling span and trigger click
    ul.siblings('span').click();
  }
});
user_96952860
Related