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

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

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

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

42
ajax browser-history firefox history.js html

6 ответов

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

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

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

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

40

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

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

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

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

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

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

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

9

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

1

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

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

вы можете использовать cookies для достижения желаемого.

0

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

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

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

0

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

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

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

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

-1