Как сохранить содержимое веб-формы для кнопки «Назад»

Question

Когда веб-форма отправляется и переносит пользователя на другую страницу, очень часто пользователь нажимает кнопку «Назад» для повторной отправки формы (в моем случае это расширенный поиск).

Как я могу надежно сохранить параметры формы, выбранные пользователем, когда они нажимают кнопку Назад (чтобы им не пришлось начинать с нуля с повторного заполнения формы, если они меняют только один из множества элементов формы?)

Нужно ли идти по пути сохранения параметров формы в данных сеанса (куки или на стороне сервера) или есть способ заставить браузер справиться с этим для меня?

(Среда - PHP / JavaScript - и сайт должен работать на IE6 + и Firefox2 +)

Answer 1

Я верю, что вы во власти браузера. Когда вы наносите ответный удар, браузер не делает новый запрос к серверу на контент, он использует кеш (почти во всех браузерах, которые я когда-либо видел). Так что все, что на стороне сервера, отсутствует.

Мне интересно, не могли бы вы сделать что-то очень сложное, например, сохранить результат поиска в cookie во время события onunload на странице результатов, а затем прочитать cookie в javascript на странице поиска и заполнить форму - но это это просто предположение, я не знаю, сработает ли это.

Answer 2

Я бы поставил это на сессию.
Он будет самым надежным, и даже если они не пойдут прямо «назад», у него все равно останутся варианты поиска. Поместить его в файл cookie также будет полезно, но не рекомендуется, если это не очень маленькая форма.

Answer 3

Это зависит от браузера, но в большинстве случаев вам ничего не нужно делать.

IE, Firefox и т. Д. С удовольствием запомнят содержимое формы на предыдущей странице и снова отобразят его при нажатии кнопки «Назад» ... если вы ничего не сделаете, чтобы остановить эту работу, например, сделать страница без кэширования или создание формы полностью из скрипта.

(Размещение материала в сеансе может привести к путанице в браузерах с двумя вкладками, открытыми в одной форме. Будьте очень осторожны при выполнении чего-либо подобного.)

Answer 4

Проблема, с которой вы столкнулись, заключается в том, что браузер вернет кешированную версию страницы и, возможно, больше не будет запрашивать ее у сервера, что означает, что использование сеанса будет неуместным.

Однако вы можете использовать AJAX для загрузки сведений о ранее отправленной форме в событие загрузки страницы.

Answer 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 перезапишет это, но это должно быть безопасно.

Answer 6

Вы также можете делать все локально с помощью 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 такое поведение по умолчанию.

Answer 7

Почему бы не сохранить значения в файле cookie перед отправкой? Вы также можете включить метку времени или токен, чтобы указать, когда он был заполнен. Затем при загрузке страницы вы можете определить, следует ли заполнять поля данными из файла cookie или просто оставить их пустыми, потому что это новый поиск.

Answer 8

Еще один вариант ajaxy (так что пользователям без javascript это нехорошо) - отправить форму через javascript, а затем перейти на страницу подтверждения (или показать сообщение в форме, заменив кнопку сообщением). Таким образом, «назад» невозможно.