Сохранять состояние страницы для повторного просмотра с помощью кнопки браузера

У меня есть страница, которая динамически загружает контент на основе нажатия пользователем кнопки:

${document).ready(function)
{
    $("#myButton").click(function()
    {
        $("#dynamicDiv").load("www.example.com");
    });
}

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

Клянусь, я видел другое поведение раньше, но, может быть, я сумасшедший. Разве браузер не должен сохранять состояние страницы, а не перерисовывать его?

EDIT: Кстати, я использую Play! если это имеет какое-либо отношение к этому.

Ответ 1

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

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

Например, если вы отображаете информацию пользователя динамически. Каждый раз, когда вы показываете один, вы меняете хеш-адрес URL-адреса примерно так: "#/user/john". Всякий раз, когда страница загружается, вам нужно проверить, существует ли хэш (window.location.hash), проанализировать его и загрузить информацию о пользователе.

Ответ 2

Реализация функциональных возможностей браузера жесткая. Это становится проще, если вы используете плагин, например jquery.history.js.

http://tkyk.github.com/jquery-history-plugin/

Ответ 3

epignosisx и Малькольм оба правы. Он также известен как "глубокая связь". Мы использовали JQuery Address Plugin для решения этой проблемы в недавнем приложении Play.

http://www.asual.com/jquery/address/

Ответ 4

Метод, который я использую для этого, - это сериализовать состояние в JSON, сохранить его в хэш-строке и затем прочитать его обратно, когда страница будет перенесена обратно. Это было протестировано в IE10 +, Firefox, Chrome.

Пример:

// On state change or at least before navigating away from the page, serialize and encode the state
// data you want to retain into the hash string

window.location.hash = encodeURIComponent(JSON.stringify(myData));

// If navigating away using Javascript, be sure to use window.location.href over window.location.replace

window.location.href = '/another-page-url'

....

// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data
// by decoding and parsing the JSON string

if (window.location.hash) {

    // Read the hash string omitting the # prefix

    var hashJson = window.location.hash.substring(1);

    // Restore the deserialized data to memory

    myData = JSON.parse(decodeURIComponent(hashJson));
}