页面重新加载后保存菜单状态

Question

我有树状视图菜单，我想在页面重新加载后记住它的状态。要重新加载页面，我正在使用 angularJS 函数 $state.reload();

我不知道我应该使用 Jquery 来收集有关菜单当前状态的 cookie 并保存它，或者也许有一种方法可以使用 angular 来收集有关当前状态的数据。

任何想法和建议都将受到高度赞赏。

这是我的 HTML

<nav class="side-nav" id="menu">
<ul>
    <li class="side-nav-item">
        <a href="/index">
            <i class="nav-item-icon icon ion-ios7-navigate-outline"></i>
            Main page
        </a>
    </li>
    <li class="side-nav-item collapsable">
        <a href="javascript:void(0);">
            <i class="nav-item-icon icon icon ion-chevron-right"></i>
            1. subitem
        </a>
        <ul style="display:none;">
            <li class="side-nav-item">
                <a ui-sref=".countiesandtowns">
                    <i class="nav-item-icon icon ion-clipboard"></i>
                    2. subitem
                </a>
            </li>
        </ul>
    </li>
</ul>

这是我正在使用的 JQuery

$(function () {
$(document).ready(function () {
    $("#menu").treeview({
        toggle: function() {
            var element = $(this).find(">a>i");

            if (element) {
                var rightElement = element.hasClass("ion-chevron-right");
                var downElement = element.hasClass("ion-chevron-down");

                element.removeClass("ion-chevron-right");
                element.removeClass("ion-chevron-down");

                if (rightElement)
                    element.addClass("ion-chevron-down");
                if (downElement)
                    element.addClass("ion-chevron-right");
            }
        }
    });
});});

Answer 1

我认为您最好的选择是考虑将window.localStorage 与 cookie 后备一起使用。事实上，如果你使用angular，你甚至可以考虑使用angular-local-storage，可以看到here。

angular-local-storage 为您提供 cookie 回退，但这并不难实现，只需要检查 window.localStorage 是否已定义。

希望能帮到你！

Answer 2

听起来 cookie 就是你想要的。看看这个W3C spec on cookies，不需要 jQuery！

保存 cookie 后，在页面重新加载后只需检查 cookie 的状态并根据该状态显示菜单