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

StackOverflow https://stackoverflow.com/questions/247573

题

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

如何在用户单击“返回”时可靠地保留用户选择的表单选项（因此，如果他们只更改了多个表单元素中的一个，则不必从头开始再次填写表单？）

我是否必须沿着会话数据（cookie或服务器端）存储表单选项的路线，或者有办法让浏览器为我处理这个吗？

（环境是PHP / JavaScript - 该网站必须适用于IE6 +和Firefox2 +）

有帮助吗？

解决方案

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

其他提示

我相信你受浏览器的支配。当你回击时，浏览器不会向服务器发出新的内容请求，它使用缓存（几乎在我见过的每个浏览器中）。所以任何服务器端都出来了。

我想知道你是否可以做一些非常复杂的事情，比如在结果页面的onunload事件期间将搜索结果存储在cookie中，然后在搜索页面上的javascript中读取cookie并填写表单 - 但是这样只是猜测，我不知道它是否会起作用。

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

IE，Firefox等会愉快地记住上一页中表单的内容，并在单击Back时再次显示...只要你没有做任何事情来阻止它的工作，比如制作页面no-cache或完全从脚本构建表单。

（在会话中放置内容可能会混淆浏览器在同一表单上打开两个标签。做这样的事情时要非常小心。）

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

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

在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代码会覆盖它，但这应该是安全的。

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

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

你也可以通过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

我应该说btw默认情况下FireFox和IE都有此行为。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top