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

Question

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();

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.

Here is my 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>

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

Answer 1

It sounds like cookies are what you want here. Check out this W3C spec on cookies , no jQuery required!

Once you save the cookie, after a page reload just check the state of the cookie and display the menu based on that

Answer 2

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 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.

Hope that helps you out!