Сохранять динамически измененный HTML на обратной кнопке

Удивительно, я постоянно вижу, что это работает на других сайтах, но никогда на сайтах, над которыми я работаю.

Я привожу новый контент с помощью ajax, я знаю об истории .js и API истории, я не хочу менять URL-адрес, просто используйте кеш браузера для нового содержимого HTML, поэтому, когда пользователь покидает страницу и возвращается с помощью кнопки "Назад", он все еще имеет обновленный HTML.

Я вижу, что это работает все время на других сайтах без изменения URL-адреса или с использованием хеша #. Есть ли трюк, чтобы заставить его работать или это случайно определено браузером?
Если я не хочу использовать URL для получения этой информации, есть ли простая альтернатива?

Ответ 1

В течение примерно десятилетия и половины теперь я использую два трюка, которые я когда-то обнаружил из-за мучительных проб и ошибок: значения полей ввода - особенно "скрытые" - сохраняются в истории браузера вместе с URL-адресами - событие onLoad вызывается при возврате на страницу с помощью кнопок (или вперед).

Это означает, что вы можете хранить столько "состояния", сколько хотите - в скрытых полях (не забудьте разместить их в форме), а затем "переделать" изменения в onLoad. Я обычно делаю часть "render" отдельной функцией... Другими словами, в то время, когда происходит динамичность, я сначала пишу в скрытые поля, а затем вызываю функцию рендеринга. Затем я собираю все различные функции рендеринга для различных бит динамичности и вызываю их из onLoad.

Я хотел бы подчеркнуть, что я ни разу не охотился на это в каких-либо руководствах, поэтому не могу дать никаких заверений, но я надежно использовал это время (начиная с Netscape!!!) Он работает с "многими" браузерами ( все IE, хром, FF - но что касается других, я никогда не пробовал.)

Если у кого-то есть более "правильный" и менее утомительный способ, я один, буду очень рад услышать об этом. Но это похоже на трюк.

Ответ 2

Автор RES здесь нашел ваш вопрос в /r/javascript

По-видимому, Firefox недавно добавил функциональность, чтобы сделать это сам по себе, но нет "хорошего" способа сделать это, когда браузер не сделает это за вас.

В качестве RES используется добавление маркера # page = n, где n - номер вашей страницы. Таким образом, в pageload, RES знает, что вы, должно быть, пришли с кнопки "Назад", если у вас уже есть location.hash - к сожалению, это конкретное поведение, связанное с ctrl-f, обнаруживается как в Firefox, так и в Chrome, когда поиск заставил вас прокрутить страницу до другая страница (page = n + 1), потому что hashchange закроет диалог поиска, который раздражает пользователей...

Итак, теперь RES делает какую-то уродливую и несовершенную гимнастику, чтобы догадаться, прибыл ли вы на страницу через кнопку "Назад". Каждый раз, когда он загружает новую страницу, он сохраняет это число в sessionStorage (например, localStorage, но локально на вкладке), а при появлении с помощью кнопки "Назад" он отключает запрос на этот номер страницы.

Однако: недавно я тестировал в FF и Chrome, и кажется, что изменения хеша больше не "отменяют" диалог ctrl-f find, поэтому мое предложение будет заключаться в том, что вы его используете. При загрузке, если присутствует хеш, загрузите соответствующие данные, определенные этим хешем.

Вы можете, если хотите действительно сумасшедший, сохранить фактический контент HTML в localStorage и перезагрузить его на pageload через кнопку "Назад". Это может быть не самый эффективный способ делать что-то, и почти наверняка вызовет конфликты с javascript, которые полагаются на DOM, однако, пройдите осторожно!

"Лучшее" решение действительно зависит от того, что именно делает ваш сайт/что этот контент выглядит/ведет себя как.

Ответ 3

Вы можете достичь своей цели, используя History.js следующим образом:

function manageHistory(data){

    var History = window.History;
    if ( !History.enabled ) { return false; }        
    History.replaceState({myData: data}, null);
}

$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer

    e.preventDefault(); 

    // get data from your select tag

    manageHistory( data)


});

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState();

    // Launch the ajax call and update DOM using State.data.myData
});

Согласно документации об истории на сайте Mozilla, третий параметр PushState:

URL -....... Этот параметр является необязательным; если он не указан, он устанавливает текущий URL-адрес документа.

Ответ 4

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

Если вы создаете статическую страницу html/js, такой сеанс и страница не перезагружаются.

Вы можете использовать файлы cookie для достижения желаемого.

Ответ 5

Локальное хранилище является одним из способов, другой способ - сохранение на стороне сервера.

Когда HTML отредактирован/создан/какое-либо свойство изменено на стороне клиента, вам нужно синхронизировать изменение состояния вашей страницы с webstorage или базой данных через успокоительный api (или что-то подобное).

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

Ответ 6

Я бы порекомендовал вам использовать файлы cookie.

Хотя HTML5 предлагает Webstorage, его значения могут храниться в браузере. Существуют также некоторые JS-библиотеки, обрабатывающие HTML5 Webstorage.

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

Примечание2: возникли некоторые проблемы с взломом дискового пространства пользователя, поэтому вы можете ожидать, что политики об использовании webstorage будут обновлены. (http://feross.org/fill-disk/)