我应该将菜单折叠状态存储在多个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('-');
        }
    });

});

我已经在JSFiddle页面上添加了所有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/