单击浏览器后退按钮时保留表单字段和 jQuery var 值答案

【问题标题】：Retaining form field and jQuery var values when browser Back button clicked单击浏览器后退按钮时保留表单字段和 jQuery var 值
【发布时间】：2015-01-20 18:34:07
【问题描述】：

我有一个使用以下平台/技术编写的网络项目：

ASP.NET and MVC5/C#
.NET Framework 4.5.1
jQuery 2.1.1
jQuery UI 1.10.4

该应用程序被编写为跨浏览器兼容和响应式。

该应用程序有几个页面，其中包含工程师用来输入数值的许多复杂表单字段。这些值是温度、流体和空气流量公差、散热限制等。有许多下拉菜单允许为输入和输出选择测量单位（摄氏度/华氏度、米/英尺每秒等）。

选择度量单位后，其关联的表单字段值会被转换，并且表单字段值会使用 jQuery 事件进行相应的转换/计算/更新。度量单位选择保存在该页面上的 jQuery 全局变量中。

通常的程序流程是让用户输入他们的规格和首选 UOM。输入/转换表单值后，将使用 HTTP POST 提交它们。从 MVC 控制器以 JSON 格式返回带有缩写详细信息的兼容产品列表，并使用 jQuery DataTables 显示。

然后，用户可以选择其中一种产品，从而导航到不同的 MVC 视图，该视图显示指定产品的大量详细信息以及可选配件、定价和运输选项等。

客户决定在用户单击浏览器的后退/前进按钮时保留这些表单字段的状态。这对我来说似乎是一项艰巨的任务。我知道使用 ASP.NET 会话变量，但我想问问开发者社区实现这种功能的优缺点是什么以及推荐的方法。

【问题讨论】：

cookie 可能更可取，因为它存储在客户端并且可以通过 javascript 读取/写入。如果用户使用后退按钮，则有可能永远不会再次访问服务器，该页面只会从浏览器缓存中加载。但是，javascript 仍将执行并能够提取这些字段的 cookie 值。
@Tommy HTML5 没有实现保存表单数据的功能吗？既然 ASP 使用 cookie 来保存会话变量，这可能行得通吗？或者您是否建议在客户端使用 jQuery 保存 cookie？抱歉，我从来没有遇到过像这样保存复杂表单数据的挑战。
ASP 使用cookie 来存储会话ID，而不是会话中的值，通常存储在服务器内存中。至于 HTML 5，他们可能有，但由于我的大多数应用程序仍然需要支持 IE8 等旧版浏览器，因此我在使用这些新功能方面没有太多经验。顺便说一下，您可以从客户端和服务器端创建/编辑 cookie。客户端无法直接访问会话变量，因为它们存储在服务器上。
听起来你们在谈论 html5 localStorage。它实际上有很好的浏览器支持，甚至是 IE8。 developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
@ClaytonLeis 是的，localStorage 就是我的想法。您的链接显示了另一个可能更合适的选项 - sessionStorage。我认为我们不需要在浏览器关闭后保留值。我还没有准备好整个链接，但我会的。鉴于这些形式的复杂性以及缺乏考虑到这一点的设计，我不确定这是否可以直接实施。

标签： jquery html asp.net asp.net-mvc forms

【解决方案1】：

这是一个使用浏览器的 sessionStorage 的解决方案。

在您的表单提交按钮（或事件）上，通过调用存储所有表单数据 StoreFormValues($(#MyFormId"), "MyFormName" )

加载页面时检查页面是否通过后退按钮导航到，如果是则恢复所有表单数据。

if (performance.navigation.type == 2) { // 2 means page was accessed by navigating into the history (Browser Back Button)
    RestoreFormValues($("#MyFormId"), "MyFormName");
}

function RestoreFormValues(form, name) {
    form.find(':input:visible').not(':input[type=button], :input[type=submit], :input[type=reset]').each(function () {
        var value = sessionStorage.getItem(name + $(this).prop('id'));
        if (value)
            $(this).val(value);
    });
}

function StoreFormValues(form, name) {
    form.find(':input:visible').not(':input[type=button], :input[type=submit], :input[type=reset]').each(function () {
        sessionStorage.setItem(name + $(this).prop('id'), value = $(this).val());
    });
}

MyFormName 只是会话存储中字段名称的唯一前缀。

【讨论】：