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

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

Вопрос

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

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

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

Однако вы можете использовать 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

Я должен сказать, что между FireFox и IE такое поведение по умолчанию.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top