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

问题描述

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

I have treeview menu where I would like to remember its state after page reloads. To reload page I'm using angularJS function $state.reload();

我不知道我该使用Jquery收集有关菜单当前状态的cookie并将其保存，还是有一种方法可以使用angular收集有关当前状态的数据.

I don't know should I use Jquery to collect cookies about current state of menu and save it, or maybe there is a way to collect data about current state using angular.

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

Any ideas and suggestions would be highly appreciated.

这是我的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

And here is JQuery I'm using

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

推荐答案

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

I think your best option will be to consider using window.localStorage with a cookie fallback. In fact, if you are using angular you may even consider using angular-local-storage which can be seen here.

angular-local-storage为您提供了cookie后备功能，但这并不太容易实现，您只需检查是否定义了window.localStorage.

angular-local-storage provides the cookie fallback for you but this isn't too hard to implement yourself and just requires a check for whether window.localStorage is defined.

希望对您有帮助！

这篇关于页面重新加载后菜单的保存状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！