显示后如何保存状态：无？防止页面重新加载后重置

Question

基本上我在一个元素上默认使用 display: none ，然后在单击不同标题后使用 javascript 将隐藏元素切换到另一个元素。现在我的实现完美无缺。

唯一的问题是，当您重新加载页面时，它会恢复为默认值，而不是保持原样。

这段代码中发生的事情是我将隐藏元素的标题与函数 hideUnhide 绑定。当它被点击时，我隐藏当前元素，显示先前隐藏的元素，然后设置标题的 css 以使隐藏的元素看起来像一个链接，而显示的元素看起来像一个标题。

$(document).ready(function() {
    var unclicked = $('.unclickedTeam');
    unclicked.bind("click", hideUnhide);
});

function hideUnhide() {
    var unclicked = $('.unclickedTeam');
    var clicked = $('.currentTeam');
    var displayedTeam = $('.displayedTeam');
    var hiddenTeam = $('.hiddenTeam');

    displayedTeam.css('display', 'none');
    hiddenTeam.css('display', 'block');

    displayedTeam.addClass('hiddenTeam');
    displayedTeam.removeClass('displayedTeam');

    hiddenTeam.addClass('displayedTeam');
    hiddenTeam.removeClass('hiddenTeam');

    unclicked.addClass('currentTeam');
    unclicked.removeClass('unclickedTeam');

    clicked.addClass('unclickedTeam');
    clicked.removeClass('currentTeam');

    unclicked.unbind();
    clicked.bind("click", hideUnhide);
}

我怎样才能按原样保存状态？除了使它们成为两个单独的页面之外，当单击标题时它们会相互跳转。

Answer 1

您可以使用 localStorage 来存储之前的状态。

localStorage.setItem("hide", "yes"); // Set state

if(localStorage.getItem("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

LocalStorage 与大多数浏览器兼容。见：http://www.html5rocks.com/de/features/storage

如果您想确保也可以使用 Cookie 和 JavaScript。
您可以使用这个 JS 函数来创建/删除 cookie：

function setCookie(name,value,mins) {
    var expires = "";
    if (mins) {
        var date = new Date();
        date.setTime(date.getTime()+(mins*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

下面是如何使用 JavaScript 的示例：

setCookie("hide", "yes", 43200); // Set state (expire in 30 days)

if(getCookie("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

测试了两个，工作正常。

Answer 2

您可以使用localStorage 来保存页面的状态，例如，像这样

window.localStorage.setItem( 'stateTeam1', 'hidden' );

您的代码总体上需要添加两处：

1. 在hideUnhide 方法中，您需要更新localStorage 中的条目。
2. 在页面加载时，您必须从 localStorage 中提取状态并应用属性集。

浏览器支持非常好，seen at caniuse也可以。