如何在页面更改时保留Javascript状态

How to retain Javascript state on page change

本文关键字：保留 Javascript 状态      更新时间：2023-09-26

我设置了一个手风琴样式的导航列表，这样当点击类别时，它就会打开显示链接到页面的子类别。

我想做的是让手风琴导航列表在新页面打开时保持打开或关闭状态。

我已经收集到cookie在刷新时保持状态，但是当访问不同的页面时，我如何保持状态?所有的页面都有相同的手风琴导航列表

试试Web Storage。在页面卸载时存储选项卡的状态，在页面加载事件时恢复状态。

我找到了一个解决方案，它使用这里找到的accordian插件http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi和jquery cookie.js插件

我在html标记中为标题锚定页面添加了id，如下所示

 <li>
        <a id="m1" class="label" href="#">Sound/Audio Systems</a>
        <ul class="acitem">
            <li><a href="products.php?sub_cat=PA_Systems">PA Systems</a></li>
            <li><a href="#">Loudspeakers</a></li>
            <li><a href="#">Microphones </a></li>
            <li><a href="#">DJ Equipment</a></li>
            <li><a href="#">Sound Processing Equipment</a></li>
        </ul>
    </li>

并修改了accordian.js代码，我添加了以$开头的行。cookie和文档中的If语句。准备好函数。

jQuery.fn.initMenu = function() {  
return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active'),
    currentID = "";
    $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                        currentID = $(this).prev().attr('id');
                        $.cookie('menustate', currentID, {expires: 2, path: '/'});
                    }
                    else {
                        $(this).prev().removeClass('active');
                        $.cookie('menustate', null, {expires: 2, path: '/'});
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', 
                        function() {
                            $(this).prev().removeClass('active');
                            $.cookie('menustate', null, {expires: 2, path: '/'});
                        }
                    );
                    return false;  
                }
                return false;
            }
            if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                    $.cookie('menustate', null, {expires: 2, path: '/'});
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                    currentID = $(this).prev().attr('id');
                    $.cookie('menustate', currentID, {expires: 2, path: '/'});
                    });
                    return false;
                }
            }
        }
    );
});
};

$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
    var anchor = "",
        elementID = $.cookie('menustate');
    anchor = document.getElementById(elementID);
    $(anchor).addClass('active');
    $(anchor).next().show();
}
});

它工作得很好，对于初学者来说还不错，谢谢所有的建议。

Rob芬威克

cookie在为其指定的完整路径和域上"保留状态"。所以，如果你能让它们在一个页面上工作，你应该让它们在你网站的所有页面上自动工作。

你仍然可以使用cookie，你只需要确保它们不是特定于一个页面。例如:

document.cookie = 'openitem=5; expires=somedate; path=/';

将可以访问网站上的所有页面。

我看了一下你正在使用的库，它是一个不错的库，但你可能会发现如果你使用一个更标准的库，比如jQuery UI，它有一个手风琴控件http://jqueryui.com/demos/accordion/，就像我提到的，有很多人使用它，大多数问题的答案都可以找到。

但是就像我提到的，我确实看了一下你的图书馆。正如其他人提到的，您将使用cookie来存储值。该库支持"预展开"accordian的特定部分，为此您需要将扩展类添加到元素中。你既可以在服务器端完成，也可以在initMenu()被调用之前使用JavaScript完成。

另一个不太优雅的选项是在调用initMenu之后触发锚标记上的click事件。最后，你可以使用jQuery的show()来显示没有动画的部分。

你要做的第一件事是找出哪个部分被点击了，然后你会将该部分的名称存储在一个cookie中。在页面加载时，您将获得该值并展开相应的相应部分。这就是代码应该看起来的样子——注意，这是伪代码，你必须填写适当的部分。

$(function() {
    $(".menu.collapsible .label").click(function() {
       var accordianSection = $(this).text();
       rememberSection(accordianSection);
    });
    var section = recallSection();
    if(section !== undefined) {
        expandSection(section);
    }
});

expandSection函数看起来像这样:

var sectionLink = $(".menu.collapsible .label").filter(function() { 
    return $(this).text() == section;
});
sectionLink.trigger('click');
相关文章：