Jquery 自定义选项卡使用 Cookie 持久化

Question

我使用 jquery（和 ASP.NET MVC3 Razor 引擎）进行了简单的选项卡设置。
这是 html：

<ul id="tabul">
    <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
    <li id="hometab" class="ntabs">Home</li>
    <li id="componentstab" class="ntabs">Components</li>
    <li id="documentstab" class="ntabs">Documents</li>
    <li id="userstab" class="ntabs">Users</li>
</ul>
<div id="tabcontent">
    <div id="hometabcontent" class="tabcontainer">
        @{
            Html.RenderPartial("GetTest1Tab");
        }
    </div>
    <div id="componentstabcontent" class="tabcontainer" style="display: none;">
        @{
            Html.RenderPartial("GetTest2Tab");
        }
    </div>
    <div id="documentstabcontent" style="display: none;" class="tabcontainer">
        @{
            Html.RenderPartial("GetTest3Tab");
        }    
    </div>
    <div id="userstabcontent" style="display: none;" class="tabcontainer">
        @{
            Html.RenderPartial("GetTest4Tab");
        }
    </div>
</div>

这是 JQuery：

        $(function () {
            var total_tabs = 0;

            $("#tabcontent .tabcontainer").hide();
            $("#hometabcontent").fadeIn('slow');

            $("#addtab, #litab").click(function () {
                total_tabs++;
                $("#tabcontent .tabcontainer").hide();
                addtab(total_tabs);
                return false;
            });
            $("#hometab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#hometab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#hometabcontent").show();
                $("#hometabcontent").children().show();
            });

            $("#componentstab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#componentstab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#componentstabcontent").fadeIn('slow');
            });
            $("#documentstab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#documentstab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#documentstabcontent").fadeIn('slow');
            });
            $("#userstab").click(function () {
                $("#tabul li").removeClass("ctab");
                $("#userstab").addClass("ctab");
                $("#tabcontent .tabcontainer").hide();
                $("#userstabcontent").fadeIn('slow');
            });

            function addtab(count) {
                var closetab = '<a href="" id="close' + count + '" class="close">&times;</a>';
                $("#tabul").append('<li id="t' + count + '" class="ntabs">Tab ' + count + '&nbsp;&nbsp;' + closetab + '</li>');
                $("#tabcontent").append('<div id="c' + count + '" class="tabcontainer">Tab Content ' + count + '</div>');

                $("#tabul li").removeClass("ctab");
                $("#t" + count).addClass("ctab");

                $("#t" + count).bind("click", function () {
                    $("#tabul li").removeClass("ctab");
                    $("#t" + count).addClass("ctab");
                    $("#tabcontent .tabcontainer").hide();
                    $("#c" + count).fadeIn('slow');
                });

                $("#close" + count).bind("click", function () {
                    // activate the previous tab
                    $("#tabul li").removeClass("ctab");
                    $("#tabcontent .tabcontainer").hide();
                    $(this).parent().prev().addClass("ctab");
                    $("#c" + count).prev().fadeIn('slow');

                    $(this).parent().remove();
                    $("#c" + count).remove();
                    return false;
                });
            }
        });

非常简单。只是隐藏任何不活动的选项卡内容。添加新选项卡时，会在“tabul”中添加新的

，并在“tabContent”中添加新的

。前四个选项卡是静态的，永远不会关闭（这就是为什么它们在开始时静态添加的原因）。

我的问题是刷新页面时选项卡的持久性，我想保持会话。解决这个问题的正确方法是什么？我可以使用 JQ Cookie 插件吗？如果是这样怎么办？