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

我想使用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();
}        

$（“#myUL ul.tog li a”）。单击（函数（）{
var值=$（this.parent（“li”）.attr（“rel”）；
$（“#myUL ul.main li”）.removeClass（“突出显示”）；
$（this.parent（“li”）.addClass（“highlight”）；
setItem（'pms'，JSON.stringify（value））；
console.log（'存储的菜单：'+值）；
});
var retrievedObject=JSON.parse（localStorage.getItem（'pms'））；
if（检索对象）{
$（“#myUL ul.tog li[rel=“+retrievedObject+”]ul”）.slideToggle（）；
$（“#myUL ul.tog li”）。删除类（“突出显示”）；
$（“#myUL ul.tog li”）.find（“span.current page”）.remove（）；
$（“#myUL ul.tog li[rel=“+retrievedObject+”]）。addClass（“highlight”）。append（“”）；
$（“#myUL ul.tog li”）。删除类（“突出显示”）；
$（“#myUL ul.tog li”）.find（“span.current page”）.remove（）；
}        

现场重现问题-->

菜单1








菜单2






var openedTreeLiIndex=JSON.parse（localStorage.getItem（'openedTreeLiIndex'））| |[]；
RestorePenedTreeIndex（）；
$（“.treeparent”）。单击（函数（）{
var$tog=$（this.next（'.tog'）；
$tog.slideToggle（）；
如果（$tog.hasClass（'open'））{
$tog.removeClass（'open'）；
}否则{
$tog.addClass（'open'）；
}
$（“.arrow”，this.toggleClass（'flip'）；
storeOpenTreeIndex（）；
});
函数storeOpenTreeIndex（）{
var liItems=$（'.menu text>li'）；
var计数器=liItems.length；
$（liItems）。每个（函数（索引，li）{
var nestedUl=$（li.find（'ul.open'）；
如果（嵌套长度>0）{
if（openedTreeLiIndex.indexOf（index）=-1）{
openedTreeLiIndex.push（索引）；
}
}否则{
openedTreeLiIndex=openedTreeLiIndex.filter（函数（项）{return item！==index；}）；
}
如果（！--计数器）{
setItem（'openedTreeLiIndex'，JSON.stringify（openedTreeLiIndex））；
}
});
}
函数restorePenedTreeIndex（）{
var liItems=$（'.menu text>li'）；
var计数器=liItems.length；
$（liItems）。每个（函数（索引，li）{
if（openedTreeLiIndex.indexOf（index）！=-1）{
$（li）.find（'ul'）.addClass（'open'）.css（{display:'block'}）；
}
});
}

---

您需要选择

a

，然后获取其父级

ul

，并单击

ul

的同级

span

。下面是相同的代码

同时将代码包装在

$（文档）中。准备就绪

，以便在必要的脚本初始化后执行单击

// 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.请注意，在您的示例中，您有两个

rel=“0”

li，因此当

retrievedObject=0

时，它将同时展开这两个对象。确保

rel

具有唯一值，这样它就可以完美工作

您的完整代码如下所示

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

---

你的意思是删除所有JS内容，只添加

数据rel=“{rel attribute value}”

？不。保留所有现有代码。只需在ul.tog的li项中添加data rel属性，答案将被编辑，示例将在jsfiddle中进行测试。之前，您是如何将插入符号向下翻转的？像这样-this.classList.toggle（“插入符号向下”）；？让我们看看。您是否检查了

值
中包含的内容？i、 e
console.log（'存储的菜单：'+值）？@Swati我试图检查。但是
console.log（'存储的菜单：'+值）
不是安慰性的，因为您没有
.attr（“rel”）
在您的
li
标签中添加该选项。@Swati我用
rel
更新了我的问题。但问题是一样的
$(".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();
  }
});