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

本质上，我在一个元素上使用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); 
}

如何保存状态？除了使它们成为两个单独的页面时，单击标题时可以跳转到彼此。

来源

2013-03-11 Tom Prats

您可以使用localStorage来存储以前的状态。使用'localStorage.setItem（“key”，“value”）;''和'localStorage.getItem（“key”）;'。 – fnkr 2013-03-11 08:59:36

您可以使用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-函数创建/删除cookies：

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 
}

测试了，工作。

来源

2013-03-11 09:05:09 fnkr

感谢您的彻底解答。我想我会使用本地存储并对其进行测试，但如果效果不好，我会使用您的Cookie方法，谢谢 – 2013-03-11 09:46:32

localStorage更适合这样做，因为每次客户端联系服务器时，所有的cookie都会发送到服务器和那些没有必要在这里（结果是更多的流量，这是不好的）。但是你也可以[检查localStorage是否可用]（http://mathiasbynens.be/notes/localstorage-pattern）。 – fnkr 2013-03-11 09:49:25

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

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

你的代码的整体需要两个加法：

内hideUnhide方法，你就需要更新在localStorage的条目。
在页面加载中，您将不得不从localStorage中提取状态并应用属性集。

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

来源

2013-03-11 08:59:31 Sirko

本地存储兼容所有浏览器？如果它在IE浏览器中崩溃，它至少会干净地（做我已经做的）？ – 2013-03-11 09:11:57

请参阅[我的答案]中的链接（http://stackoverflow.com/questions/15334491/how-to-save-state-after-display-none-prevent-reset-after-page-reload/15334623#15334623）。 – fnkr 2013-03-11 09:20:52

@TMP localstorage得到很好的支持。为此添加了一个链接。 – Sirko 2013-03-11 09:24:30

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

回答

相关问题