Question

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

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

该应用程序被编写为跨浏览器兼容且响应迅速。

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

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

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

然后，用户可以选择导致导航到其他MVC视图的其中一个产品，该视图显示指定产品的详细信息以及可选附件，定价和运输选项等。

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

Answer 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只是一个名称，用于在会话存储中唯一地为字段名称添加前缀。

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

1 个答案: