DOM Storage - Browser Storage types overview and examples

gistfile1.js

//author:lo sauer 2011; lsauer.com
"DOM Storage is the name given to the set of storage-related features"
 see here: https://developer.mozilla.org/en/DOM/Storage

==LOCAL STORAGE/SESSION STORAGE==
	Cookies result in HTTP overhead
	HTML5 solutions:
	Local Storage & Session Storage
	*Hash key/value store
	*5MB of data across browsers / per site (W3C Specification)
	*Local Storage (persistent)
	*Session Storage (removed when the tab is closed)
	*simple way to store content on the client side without having to go through cookie setup and avoids HTTP re-transmittance
	*-String type only: -> serialize with JSON.decode/JSON.stringify
	*- requires namespacing for different app/same domain; or 1subdomain/webapp
	   Note for FireFox(Gecko): localStorage is the same as  globalStorage[location.hostname] but:
	   http://domain.com CAN'T access the localStorage object from https://domain.com yet both have access to the same globalStorage item
	*- No method to check for the total size use this function:
		window.localStorage.__proto__.size = function(){var len =0;for(k in window.localStorage) len+=window.localStorage[k].length; return len;}
		or by extending the Storage object before instantiation:
	   Storage.prototype.size = function(){var len =0;for(k in window.localStorage) len+=window.localStorage[k].length; return len;}

	*simple app-manifest implementation


//localStorage 'Storage-Object':
	Functions {Object} localStorage
	clear: function clear() { [native code] }
	constructor: function Storage() { [native code] }
	getItem: function getItem() { [native code] }
	key: function key() { [native code] }
	removeItem: function removeItem() { [native code] }
	setItem: function setItem() { [native code] }
	size: function(){var len =0;for(k in window.localStorage) len+=window.localStorage[k].length; return len;}

//Overriding / Access issue
	When setting an object with the same name as a methodname of the Storage object such as key or getItem, the
	stored data type of the same name will be accessed making the method inaccessible until clear() is called.
	For instance:
	window.localStorage.key = "test"
	window.localStorage.key()
	>TypeError: Property 'key' of object #<Storage> is not a function


//Preferentially use the interface methods for adding, removing, indexing keys/values:
	//save data
	sessionStorage.setItem("username", "Birdie");
	//~equivalent to
	sessionStorage.username = "Birdie"

// Access stored data
	console.log( username, sessionStorage.getItem("username"));
	//~equivalent to
	delete window.localStorage.username

//continuing above's example..
	delete window.localStorage.key
	>true
	window.localStorage.key
	>function key() { [native code] }

//Storage function's won't prevent overriding own functions:
	sessionStorage.setItem("key", "test")
	sessionStorage.key
	>"test"


//You can delete all data with clear()
	window.localStorage.clear()
	>undefined
	window.localStorage.size()
	>0

//Storing and retrieving JS objects
	window.localStorage['appname_cache'] = JSON.stringify( navigator )
	//avoid cyclic structures of which there are many!
	>RangeError: Maximum call stack size exceeded
	//selecting some required data...
	window.localStorage['appname_cache'] = JSON.stringify( 
	   {appCodeName:navigator.appCodeName, appName: navigator.appName, appVersion:navigator.appName}
	);
	var userAppBrowser = JSON.parse(window.localStorage['appname_cache']);