如何在顯示後保存狀態：無？防止頁面重新加載後重置

本質上，我在一個元素上使用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

如何在顯示後保存狀態：無？防止頁面重新加載後重置

回答

相關問題