如何在使用“后退”按钮时保留网页表单内容

Question

当网页表单被提交并跳转到另一个页面时，用户通常会点击“返回”按钮以重新提交表单（在我的情况下，表单是高级搜索）。如何可靠地保留用户选择的表单选项，以便当他们点击“返回”时不必重新填写整个表单（如果他们只更改了许多表单元素中的一个）？我需要通过存储会话数据（cookie或服务器端）的方式来实现吗？还是有一种方法可以让浏览器帮我处理这个问题？（环境为PHP/JavaScript，且该站点必须在IE6+和Firefox2+上运行。）

- Peter Howe

Answer 1

我认为你要受浏览器的支配。当你点击返回时，浏览器不会向服务器重新请求内容，而是使用缓存（在我所见过的几乎所有浏览器中都是如此）。因此，任何服务器端的操作都不可行。

我想知道是否可以在结果页面的 onunload 事件中将搜索结果存储在 cookie 中，然后在搜索页面的 javascript 中读取该 cookie 并填充表单 - 但这只是猜测，我不知道它是否可行。

- AviewAnew

---

服务器端并不一定不可选 - JavaScript 会再次执行网页，所以我们可以发起一个 Ajax 请求。 - Peter Howe

那是真的。我忘记了那件事。 - Tom Ritter

Answer 2

我会把它放在会话中。
这将是最可靠的，即使他们不直接“返回”，它仍将保留他们的搜索选项。 把它放在 cookie 中也可以，但除非表单很小，否则不建议这样做。

- RoBorg

Answer 3

这取决于浏览器，在大多数情况下你不需要做任何事情。

IE，Firefox等浏览器会愉快地记住上一个页面表单的内容，并在点击返回按钮时再次显示出来...只要您不做任何阻止此功能的操作，例如使页面无缓存或完全从脚本构建表单。

(将内容放入会话中可能会混淆同时打开同一表单的两个标签页的浏览器。在执行此类操作时，请非常小心。)

- bobince

---

除非表单操作是一个https页面（以及可能是表单位置也是https），否则会出现异常。 - Lèse majesté

Answer 4

您面临的问题是浏览器会返回页面的缓存版本，可能不会再次向服务器请求，因此使用会话将无关紧要。

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

- Ady

Answer 5

你也可以通过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 都默认有这种行为。

- Pim Jager

Answer 6

你基本上需要在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代码将覆盖此内容，但这应该是安全的。

- Pistos

Answer 7

另一种使用 Ajax 的选项（因此不适用于没有启用 JavaScript 的用户）是通过 JavaScript 提交表单，然后转到确认页面（或通过将按钮替换为消息在表单上显示消息）。这样就没有“返回”可能了。

- afroginthevalley

Answer 8

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

- Zack Mulgrew