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

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 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 — ....... This parameter is optional; if it isn't specified, it's set to the document's current URL.

Answer 4

Автор РЭС здесь, найдены ваш вопрос в/r/javascript

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

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

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

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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