Here is the simple functions to save and restore the tabs' state.
function saveState(t, key){
var tabs = $(t).tabs('tabs');
var state = [];
for(var i=0; i<tabs.length; i++){
var opts = $.extend({},tabs[i].panel('options'));
delete opts.tab;
for(var f in opts){
if ($.isFunction(opts[f])){
delete opts[f];
}
}
state.push(opts);
}
localStorage.setItem(key, JSON.stringify(state));
}
function restoreState(t, key){
var tabs = $(t).tabs('tabs');
for(var i=tabs.length-1;i>=0;i--){
$(t).tabs('close', i);
}
var data = localStorage.getItem(key);
if (data){
var state = JSON.parse(data);
for(var i=0; i<state.length; i++){
$(t).tabs('add', state[i]);
}
}
}
Usage example.
saveState('#tt', 'mykey'); // save the state
restoreState('#tt', 'mykey'); // restore the state