javascript - How to make the browser remember the last page shown in multi-tab paginated content generated via ajax and jquery? -

i have tabbed content. based on html below:

<ul class="tabcontainer"> </ul>  <div id="tabcontent">      <div id="contentholder">         <!-- ajax fetched content goes here -->      </div>    <div id="pagination"></div> </div> 

f_tab function manages content of above html,including actions below:

• generating tabs.
• executing ajax fetches php pages , return result in tab holder.

• paginating each content inside content holder using jpaginator plugin (https://github.com/remylab/jpaginator):

   function f_tab(str){ $(document).ready(function(){          var tabs = {         '1' : 'page1.php?p='+var,         '2' : 'page2.php?p='+var,         '3' : 'page3.php?p='+var,      }    var toplinecolor = {     blue:'lightblue',     blue:'lightblue',     blue:'lightblue',}   $.each(tabs,function(i,j){      var tmp = $('<li><a href="" class="tab">'+i+' <span class="left" /><span class="right" /></a></li>');       tmp.find('a').data('page',j);       $('ul.tabcontainer').append(tmp); })   var the_tabs = $('.tab');  the_tabs.click(function(e){      var element = $(this);       if(!element.data('cache'))     {             $.get(element.data('page'),function(msg){             $('#contentholder').html(msg);             element.data('cache',msg);         });     }     else {     $('#contentholder').html(element.data('cache'));      }     e.preventdefault();  })  the_tabs.eq(2).click();    });       return false;        } 

the pagination function (just information) is:

 (function($){      $.fn.extend({          mypagination: function(options) {             var defaults = {                 height: 600,                 fadespeed: 1000             };             var options = $.extend(defaults, options);              //creating reference object             var objcontent = $(this);              // other inner variables             var fullpages = new array();             var subpages = new array();             var height = 0;             var lastpage = 1;             var paginatepages=null;             var numero=0;              // initialization function             init = function() {                 objcontent.children().each(function(i){                     if (height + this.clientheight > options.height) {                         fullpages.push(subpages);                         subpages = new array();                         height = 0;                     }                      height += this.clientheight;                     subpages.push(this);                 });                  if (height > 0) {                     fullpages.push(subpages);                 }                  // wrapping each full page                 $(fullpages).wrap("<div class='page'></div>");                  // hiding wrapped pages                  objcontent.children().hide();                   // making collection of pages pagination                 paginatepages = objcontent.children();                   numero=$(paginatepages).length;                  // show first page                 showpage(lastpage);              };                // show page function             showpage = function(page) {                 = page - 1;                  if (paginatepages[i]) {                      // hiding old page, display new 1                     $(paginatepages[lastpage]).hide();                     lastpage = i;                     $(paginatepages[lastpage]).fadein(options.fadespeed);                  }             };              // show pagination function (draw switching numbers)              // perform initialization             init();               //$(document).ready(function(){             $("#pagination").jpaginator({                  nbpages:numero,                 marginpx:5,                 nbvisible:8,                  overbtnleft:'#over_backward',                  overbtnright:'#over_forward',                  maxbtnleft:'#max_backward',                  maxbtnright:'#max_forward',                  onpageclicked: function(a,num) {                      showpage(num);                 }              });             //});          }     }); })(jquery); 

question: how can make browser rememeber last shown page in tab while passing tab another. example, if last page shown in tab1 page5, after clicking on tab , returning tab1, how can see page5 of tab1?

thank time. appreciated.

because ajax loading each of tabs, loses state information. far see it, have following options:

1. don't ajax load tabs. mean longer load time page less wait between changing tabs.

2. ideal: change tab change function check if content has been loaded. ajax in content if hasn't been done.

3. save page state in variable , change page variable value every time tab loaded.