在ui上状态持久性

state persistence on ui

本文关键字：持久性 状态 ui      更新时间：2023-09-26

这里我发布了我的问题声明。

用户从下拉菜单中选择选项。所选值显示在页面上。但是，当用户刷新页面时，所选的值就会从页面中消失。

我需要该值应该是我在刷新页面之前选择的值。使用js/jquery可以做到这一点吗。

请指导我如何做到这一点！

问候

您有几种解决方案可以做到这一点。

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

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

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

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

这里有几个选项：

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

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

你想要这两个选项中的哪一个取决于你，如果你想让设置保持不变，可以使用cookie。如果用户离开页面并访问其他时间，查询字符串更有用，可以防止刷新清除你的设置。

使用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")); 
});
相关文章：