Загрузка и сохранение состояния перед переходом на следующую страницу с использованием History.js

Question

Как твиттер реализует такую ​​функциональность? скажем, я на этой части веб-страницы.

Тогда давайте говорить, что я перейти на другую страницу (скажем Dev Ops Бората)

После нажатия этого. Я нажимаю кнопку «Назад», затем я заметил, что я вернулся на предыдущую страницу

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

Так что мой вопрос. Как реализовать это с помощью History.js? Я придумал что-то вроде этого.

History.Adapter.bind(window, 'statechange', function(e) { // Note: We are using statechange instead of popstate 
    var State = History.getState(); 
    $("body").css("cursor", "default"); 
    $.get(State.url, function(data) { 
     //Get The title of the page 
     var newTitle = $(data).filter('title').text(); 
     //replace the page with the new requested page 
     //$('#main-content').html($(data).find('#main-content').html()); 
     $('#main-content').children().remove(); 
     $('#main-content').html($(data).find('#main-content').html()); 
     //Change the title of the page to requested page title 
     document.title = newTitle; 

    },"html"); 

}); 

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

Answer 1

Не уверен, если я полностью понял, о чем вы просите, но как насчет сохранения содержимого каждой страницы через History.pushState, а затем извлечения из State.data.content вместо того, чтобы каждый раз выполнять новый запрос AJAX?

Так заменить AJAX ($ .get) с чем-то вроде этого:

var $main_content = $('#main_content'); 

History.Adapter.bind(window, 'statechange', function(e) { 
    var State = History.getState(); 
    $("body").css("cursor", "default"); 
    $main_content.html(State.data.content); 
}); 

А затем добавьте контент загружаемой с AJAX в State.data.content

$.ajax({ 
    url: url 
}.done(function(data) { 
    History.pushState({content: data}, null, '/replace/with/dynamic/urlpath'); 
    $main_content.html(data); 
}); 

Если вы есть функции javascript, которые изменяют DOM, т. е. show() hide(), вы можете просто обновить State.data.content глобальную функцию, которую вы запускаете каждый раз, когда вы вносите изменения в DOM.