javascript - 我应该在多个 cookie 中存储菜单折叠状态吗？

Question

我正在开发一个控制面板，它有一个左栏菜单，其中有使用 JavaScript(jQuery)、HTML 和 Cookie 的可折叠部分。请参阅图片了解简要想法。

在图像中您可以看到 Account Information菜单已展开/打开/可见。

Server Admin , Database Management , Domain Management , Mail , 和 several others未显示在图像中的折叠/关闭/隐藏

目前，我为每个菜单部分存储一个 cookie，以告知它是否折叠。如果有 10 个菜单部分，则每次加载页面时都会读取 10 个 Cookie(n X 菜单部分)。

所以我的问题是，如果我的控制面板中有 20-30 个 cokies 保存此信息，是否最好将它们存储为 1 个 cookie，然后将每个菜单的值存储在这个 cookie 中，也许是一个 JSON 字符串还是存储在 cookie 中的其他格式？

很想听听比我目前的方法更好的方法。它现在可以工作，但感觉不对。

请帮忙，我绝不是 Javascript 专家，我还在学习 JS，我的背景更多是 PHP。

到目前为止，这是我的代码...

// jQuery Cookie plugin is not shown but is also used.


$(document).ready(function() {

    // Handle the menu state based on Click events
    $('#menu-sidebar li:has(ul) .heading').click(function() {
        $(this).next().toggle();
        if ($(this).next().is(':visible')) {
            $.cookie($(this).text().replace(/\+|-|\s/g,''), 'expanded');

            $(this).children('.open').text('-');
        }

        if ($(this).next().is(':hidden')) {
            $.cookie($(this).text().replace(/\+|-|\s/g,''), 'collapsed');

            $(this).children('.open').text('+');
        }
    });

    // Handle the Menu state based on current Cookie values
    $('#menu-sidebar > li').each(function() {
        var cookieName = $(this).children('.heading').text().replace(/\+|-|\s/g,'')
        var verticalNav = $.cookie( cookieName );

        if (verticalNav == 'expanded') {
            $(this).find('ul').show();
            $(this).find('.open').text('-');
        }
    });

});

我已经在 J​​SFiddle 页面上添加了所有的 JavaScript 和 HTML + CSS，以便在此处查看它的实际效果... http://jsfiddle.net/jasondavis/mvucU/

Answer 1

由于这是一个纯 javascript 实现，您应该使用 localstorage http://diveintohtml5.info/storage.html

由于值不会随每个请求一起发送(如 cookie)，您可以选择使用单个或多个条目。如果你想使用最少的条目，你可以使用 json，e。 G。使用此插件 https://code.google.com/p/jquery-json/