狀態在UI上的持久性

在這裏，我張貼我的問題陳述。狀態在UI上的持久性

用戶從下拉菜單中選擇選項。所選值顯示在頁面上。但是，當用戶刷新頁面時，該選定的值將從頁面中消失。

我需要該值應該是我在刷新頁面之前選擇的值。這可能使用js/jquery。

請指導我如何實現這一目標！

問候

來源

2012-07-06 S Singh

是否有一個服務器端組件到您的網站（這可能是一個更好的地方來堅持這一點，如果有的話）？ – Paddy 2012-07-06 08:29:02

@ Paddy可能有點沉重，不是嗎？你會推薦一個類似帳戶的設置嗎？ – DZittersteyn 2012-07-06 08:33:37

您可以使用localStorage或sessionStorage。 http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage – Pramod 2012-07-06 08:36:46

你有幾個選擇這裏：

您可以設置使用jQuery一個cookie節省了以前的狀態。一個很好的教程可以在這裏找到：http://www.electrictoolbox.com/jquery-cookies/

你也可以用查詢字符串編碼url中的選項。關於這方面的一些信息可以在維基百科上找到：http://en.wikipedia.org/wiki/Query_string

如果您希望設置在用戶離開頁面並再次訪問時持續存在，那麼您需要哪兩種方法取決於您，查詢字符串更有用，以防止刷新清除設置。

來源

2012-07-06 08:32:04 DZittersteyn

使用Cookie插件（http://plugins.jquery.com/project/Cookie）：

$("#MyList").change(function() { 
    //Set a cookie with selected value on change. 
    $.cookie("SelectedItem", $(this).val()); 
}); 

$(document).load(function() { 
    //On load, set the selected item from the cookie. 
    $("#MyList").val($.cookie("example")); 
});

來源

2012-07-06 08:32:14 Paddy

感謝您的回覆！當cookie未啓用時，您的解決方案將失敗。 – 2012-07-06 08:43:51

這是正確的，但這就是爲什麼很難堅持客戶端的東西... – Paddy 2012-07-06 08:47:31

您有幾種解決方案，以做到這一點。

每次用戶選擇一個選項時，都會使用所選選項向服務器發送http請求。當用戶刷新頁面時，jsp將使用收集的信息預先選擇該選項。在jQuery中常見的$.get將做客戶端的技巧。
使用所選選項設置cookie。當頁面刷新時，獲取cookie值並使用它來預先選擇該選項。你不需要jQuery來做到這一點，但它可能會有所幫助。
如果瀏覽器支持它，請使用localStorage而不是cookie。這是客戶端唯一的解決方案，所以信息不會被髮送到服務器。
設置的URL的哈希存儲選項：

location.replace("#option=" + val);

刷新頁面使用location.hash時，您可以檢索該值。

來源

2012-07-06 08:36:59 MaxArt

狀態在UI上的持久性

回答

相關問題