Loading and Saving state before going to next page using History.js

Question

How does twitter implement this kind of functionality? let's say I am at this part of the web page.

Then let's say I click another page (let's say Dev Ops Borat)

After clicking that. I click the back button then I noticed that the I was back at the previous page

and take note that the location of my scrollbar is still the same where it was before. So it was definitely saving the previous state of my browser before I go to the next page.

So my question. How do I implement this using History.js? I have come up is something like this.

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");

});

This seems to be working fine, however when i click back button the previous state of the previous web page is not the same as I left it.(like in the example above)

Answer 1

Not sure if I completely understood what you'r asking for, but how about storing the content of each page through the History.pushState - and then retrieving it from State.data.content instead of doing a new AJAX request each time?

So replace your AJAX ($.get) with something like this:

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);
});

And then add the content you are loading with AJAX into State.data.content

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

If you have javascript functions that alters the DOM ie: show() hide(), you could just update the State.data.content with a global function that you run each time you do changes in the DOM.