在浏览器存储中保存树视图菜单的状态答案

【问题标题】：Saving state of treeview menu in browser storage在浏览器存储中保存树视图菜单的状态
【发布时间】：2016-07-21 19:23:41
【问题描述】：

我有一个使用 javascript 构建的 html 页面。现在我希望页面“记住”打开了哪个树视图。当菜单关闭时，类 'testclosed' 被添加到 div 中。

场景：用户打开菜单，然后点击一个按钮来完成他的任务。在此之后，用户必须返回此页面并检查所有内容是否正确填写。然后用户必须再次找到他的项目。因此，我希望浏览器记住他离开页面时打开了哪个项目

我在this 已经在这里提出的问题中找到了部分答案。我似乎找不到的唯一一件事是如何进行检查，以便我可以将其保存在浏览器存储中

编辑：这里是切换菜单（打开和关闭）的代码

$('.testlevel2').click(function () {
    var group = $(this).attr('group');
    var groupval = $(this).attr('groupvalue');
    $("div").find("[" + group + "='" + groupval + "']").toggleClass("testclosed");
});
 return "</div>";

任何帮助将不胜感激。谢谢

【问题讨论】：

也许本地存储可以帮到你：w3schools.com/html/html5_webstorage.asp
你能展示一些你的标记吗？ localstorage api 会做到这一点，但是如果没有看到你的代码就很难写一个例子。
我看不出我的代码是如何相关的。问题是如何检查班级（如上次编辑中添加的那样）。

标签： javascript jquery html treeview

【解决方案1】：

不看代码就很难做出相关的例子。您可以使用localStorage api 来存储打开的菜单的类名，然后在加载页面时检查它：

// Call this when you open and close a menu
function saveSettings(openMenuClassName) {
    // Store value in localStorage
    localStorage.setItem('openMenu', openMenuClassName)
}

function loadSettings () {
   // Get value from localStorage
   var openMenu = localStorage.getItem('openMenu');
   if (openMenu) $(openMenu).show();
}

// Check for the saved setting on page ready
$(document).ready(loadSettings);

阅读更多关于localStoragehere的信息。

【讨论】：

【解决方案2】：

思南的想法是正确的，让我走上了正确的道路。这是我最终想出的答案。

关闭项目时添加“testclosed”类。问题中的情况已经如此。

如果找到类，我在下面的 save() 函数中将 localStorage 设置为 true。

然后在 load() 函数中获取 localStorage 项，如果它设置为 true，则删除“testclosed”类。

$(document).ready(load);



function save() {
   var saveDiv = document.getElementsByClassName("testclosed"); 
   if (saveDiv) {

      localStorage.setItem("isMenuOpen", true);

   }

}

function load() {
   var isMenuOpen = localStorage.getItem("isMenuOpen");
   if (isMenuOpen) {

      $(".testitem").removeClass("testclosed");

   }

}

【讨论】：