如何为后退按钮保留 Web 表单内容

Posted 2023-02-24

【中文标题】如何为后退按钮保留 Web 表单内容

【英文标题】：How can web form content be preserved for the back button

【发布时间】：2010-09-19 20:10:30

【问题描述】：

当提交 Web 表单并将用户带到另一个页面时，用户通常会单击“后退”按钮以再次提交表单（在我的情况下，该表单是高级搜索。）

当用户单击“返回”时，如何可靠地保留用户选择的表单选项（这样，如果他们只更改多个表单元素之一，他们就不必从头开始重新填写表单？）

我是否必须将表单选项存储在会话数据（cookie 或服务器端）中，还是有办法让浏览器为我处理这个问题？

（环境为 php/javascript - 网站必须在 IE6+ 和 Firefox2+ 上运行）

【参考方案1】：

我相信你是在浏览器的摆布。当您回击时，浏览器不会向服务器发出新的内容请求，而是使用缓存（无论如何，在我见过的几乎所有浏览器中）。所以任何服务器端的东西都出来了。

我想知道您是否可以做一些非常复杂的事情，例如在结果页面的 onunload 事件期间将搜索结果存储在 cookie 中，然后在搜索页面上以 javascript 读取 cookie 并填写表格 - 但是这个只是猜测，不知道会不会成功。

【讨论】：

服务器端不一定不是一个选项 - JavaScript 再次为页面执行 - 所以我们可以发出 Ajax 请求。

确实如此。我忘记了。

【参考方案2】：

我会把它放在会话中。 这将是最可靠的，即使他们不直接“返回”，它仍然会有他们的搜索选项。 将其放入 cookie 中也可以，但除非是非常小的形式，否则不推荐使用。

【参考方案3】：

这取决于浏览器，但在大多数情况下，您无需执行任何操作。

IE、Firefox 等会愉快地记住前一页中表单的内容，并在单击 Back 时再次显示...只要您不做任何事情来阻止它的工作，例如使页面无缓存或完全从脚本构建表单。

（在会话中添加内容可能会使浏览器在同一个表单上打开两个选项卡时混淆。在执行此类操作时要非常小心。）

【讨论】：

例外情况是，如果表单操作是 https 页面，我认为（如果表单位置也可能是 https）。

【参考方案4】：

您遇到的问题是浏览器将返回页面的缓存版本，并且可能不会再次向服务器请求它，这意味着使用会话将无关紧要。

但是，您可以使用 AJAX 在页面的加载事件中加载先前提交的表单的详细信息。

【参考方案5】：

您基本上必须在 POST 之后以某种方式（可能在会话变量中，如建议的那样）将其存储在您的服务器上。您还必须在表单页面上设置 Javascript 以在加载时执行以发出 AJAX 调用以从您的服务器获取数据（例如 JSON 格式）并用数据预填充表单字段。

示例 jQuery 代码：

$( document ).ready( function() 
  $.getJSON(
    "/getformdata.php",
    function( data ) 
      $.each( data.items, function(i,item) 
        $( '#' + item.eid ).val( item.val );
       );
    );
 );

您的 /getformdata.php 可能会返回如下数据：

  'items': [
    
      'eid': 'formfield1',
      'val': 'John',
    ,
    
      'eid': 'formfield2',
      'val': 'Doe',
    
  ]

如果没有为会话保存任何内容，它显然会返回一个空数组。上面的代码很粗略且未经测试，但这应该会给你基本的想法。

附带说明：当前版本的 Opera 和 Firefox 将在返回时保留表单字段内容。你的 JS 代码会覆盖这个，但这应该是安全的。

【参考方案6】：

另一个 ajaxy 选项（因此它不适合没有 javascript 的用户）是通过 javascript 提交表单，然后进入确认页面（或通过将按钮替换为消息来在表单上显示消息）。这样就没有“后退”的可能。

【参考方案7】：

为什么不在提交前将值存储到 cookie 中？您还可以包含时间戳或令牌以指示何时填写。然后，当页面加载时，您可以确定是否应该使用 cookie 中的数据填写字段，或者将它们留空，因为这是一个新的搜索。

【参考方案8】：

您还可以通过 javascript 在本地执行所有操作。因此，您使用搜索值存储一个 cookie，并在页面加载时检查该 cookie 是否存在。像这样的：

$('#formSubmitButton').click( function() 
    var value = $('#searchbox').val();
    var days = 1;
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = "searchbox="+value+expires+"; path=/";
);

$(document).ready( function() 
    var nameEQ = "searchbox=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) 
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
   
   $('#searchbox').val(valueC);
);

尚未对此进行测试，但应该可以。为此，您将需要 jQuery。

Cookie 函数来自：http://www.quirksmode.org/js/cookies.html

顺便说一句，FireFox 和 IE 默认都有这种行为。