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 個のクッキーがある場合、代わりにそれらを 1 つのクッキーとして保存し、各メニューの値をこの 1 つのクッキー、おそらく JSON 文字列またはその他のものに保存する方がよいでしょうか?クッキーに保存される形式？

私の現在よりも良い方法を聞きたいです。現在は機能していますが、気分が悪いだけです。

助けてください、私は決して 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/