Save State of Tabs

[poeziafree]

Hello,

How can I save all opened tabs with URLs and all data in local storage and recreate them automatically on page reload?

Preferably, the saved data should be updated/created on creating a new tab.

Thanks

[jarry]

Here is the simple functions to save and restore the tabs' state.

Code:

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.

Code:

saveState('#tt', 'mykey');     // save the state
restoreState('#tt', 'mykey');  // restore the state