How to store and use my own apps page history

Question

I have a one page app, loading content with jquery ajax calls.

I made a simple back button that overrides the mobiles default back functionality.

Currently, I made it very simply that when a new ajax request is made, I store the current page tag, into a data variable of the body, and then store the upcoming page into a data variable of the body, eg:

on loading new ajax {
    $('body').data('last',whatever_the_current_page_is);
    $('body').data('current, whatever_the_new_page_is);
}

Then when the back button is pushed, it simple gets the data-last from the body and returns to this like so:

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
  var backContent = $('body').data('last');
  // load content with this data
}

The problem is , this only works one time , and I'm trying to work out how to go about having a string of history so that one could traverse through many pages and go back through them all.

How could I append a sort of log of variables, and access the last one added? Or the second last one added? Would a javascript array be the way to do this? Or perhaps just storing the whole thing in a string, eg:

page1,page2,page3,page4

Trying to work out what is the most streamlined approach for this without weighing down the end users mobile machine too much.

Answer 1

You will need to modify your code a bit to rely on anchor/hash component in the url. This is how most services implement it. Let us say that as of now, you make an ajax call after a click on a link. You will need to change it to add a hash component to the url. For eg

http://mydomain.com/pages#page=pageid

Then you will need to listen to the hashchange event and based on that, make an ajax call. This would allow the browser to remember the history.

To listen to hashchange event, you can make use of jQuery BBQ plugin:

http://benalman.com/projects/jquery-bbq-plugin/