状态在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上的持久性

回答

相关问题