javascript - ui上的状态持久化

Question

在这里，我发布我的问题陈述。

用户从下拉列表中选择选项。所选值出现在页面上。但是，当用户刷新页面时，所选值将从页面中消失。

我需要该值应该是我在刷新页面之前选择的值。这可能使用 js/jquery 吗？

请指导我如何实现这一目标！

问候

Answer 1

你有几个解决方案来做到这一点。

1. 每次用户选择一个选项时，都会向带有所选选项的服务器发送一个 http 请求。当用户刷新页面时，jsp会使用收集到的信息来预选选项。一个常见$.get的 jQuery 将在客户端完成技巧。
2. 使用所选选项设置 cookie。当页面刷新时，获取cookie值并使用它来预选选项。您不需要 jQuery 来执行此操作，但它可能会有所帮助。
3. 如果浏览器支持它，请使用localStorage而不是 cookie。这是一个仅限客户端的解决方案，因此信息不会发送到服务器。

4. 设置 URL 的哈希值以存储选项：

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

   您可以在使用刷新页面时检索该值location.hash。

Answer 2

你有几个选择：

您可以使用保存先前状态的 jQuery 设置 cookie。可以在这里找到一个不错的教程：http ://www.electrictoolbox.com/jquery-cookies/

您还可以使用查询字符串对 url 中的选项进行编码。有关这方面的一些信息可以在维基百科上找到：http ://en.wikipedia.org/wiki/Query_string

您想要哪一个取决于您，如果您希望设置在用户离开页面并再次访问时保持不变，则使用 cookie 是可行的方法，查询字符串对于防止刷新清除您的设置更有用。

Answer 3

使用 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")); 
});