sofish/localStorage.html

## localStorage.html
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>LocalStorage</title>
	<style type="text/css">
	body{margin:30px 0 0 100px;}
	body, input, textarea{font-family:Georgia;}
	strong{color:#08c;}
	</style>
</head>
<body>
	<h1>LocalStorage</h1>
	<p>Press the <strong>SUBMIT</strong> button to store the value,<br />
		or press the <strong>RESTORE</strong> button to restore the stored value, <br />
		aand press the <strong>CLEAR</strong> button to clear the localStorage data.
	</p>
	<p><textarea id="theValue" rows="5" cols="30"></textarea></p>
	<input id="storeIt" type="button" value="submit" />
	<input id="restoreIt" type="button" value="restore" />
	<input id="clearIt" type="button" value="clear" />

<script type="text/javascript">
/**
 * @ NAME: CacheProvider
 * @ DESC: the cache provider app based on javascript
 * @ COPY: http://blog.jeffbalogh.org/ && sofish
 */

var CacheProvider = function(){
	// set cache
	this._cache = {};
};

// detect localStorage
try {
	CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage']
} catch(msg) {
	CacheProvider.hasLocalStorage = false;
};

// make it able to store object
if( CacheProvider.localStorage ){
	Storage.prototype.setObj = function(key, value){
		this.setItem(key, JSON.stringify(value));
	};
	Storage.prototype.getObj = function(key){
		return JSON.parse(this.getItem(key));
	};
};

// core of the CacheProvider
CacheProvider.prototype = {
	/**
	 * {string} k: the key
	 * {boolean} l: get this from local storage?
	 * {boolean} o: is the value you put in local storage an object?
	 */
	get:function(k, l, o){
		if(l && CacheProvider.hasLocalStorage){
			var action = o ? 'getObj' : 'getItem';
			return localStorage[action](k) || undefined;
		} else {
			return this._cache[k] || undefined;
		}
	},

	/**
	 * {string} k: the key
	 * {object} v: any kind of value you want to store
	 * {boolean} l: put this in local storage
	 */
	set:function(k, v, l){
		if(l && CacheProvider.hasLocalStorage){
			if(typeof v !== 'string'){
				// make assumption if it's not a string, then we're storing an object
				localStorage.setObj(k,v);
			} else {
				try {
					localStorage.setItem(k, v);
				} catch(msg) {
					if(msg.name == 'QUOTA_EXCEEDED_ERR'){
						//debugger
						throw new Exception(v);
						return;
					}
				}
			}
		} else {
			// put in our local object
			this._cache[k] = v;
		}
		// return our newly cache item
		return v;
	},

	/**
      * {String} k - the key
      * {Boolean} l - put this in local storage
      * {Boolean} o - is this an object you want to put in local storage?
      */
	clear:function(k, l, o){
		if(l && CacheProvider.hasLocalStorage){
			localStorage.removeItem(k);
		}
		// delete in both caches
		delete this._cache[k];
	}
};


// 	set up a new CacheProvider instance
var cache = new CacheProvider,
	s = document.getElementById('storeIt'),
	r = document.getElementById('restoreIt'),
	c = document.getElementById('clearIt'),
	v = document.getElementById('theValue');

// testing the capacity of localStorage
s.onclick = function(){
	// store the value
	cache.set('store', v.value, 1);
};
r.onclick = function(){
	// restore the stored value
	v.value = cache.get('store', 1);
};
c.onclick = function(){
	// clear the cache
	cache.clear('store', 1)
}

</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>LocalStorage</title>
	<style type="text/css">
	body{margin:30px 0 0 100px;}
	body, input, textarea{font-family:Georgia;}
	strong{color:#08c;}
	</style>
	</head>
	<body>
	<h1>LocalStorage</h1>
	<p>Press the <strong>SUBMIT</strong> button to store the value,<br />
	or press the <strong>RESTORE</strong> button to restore the stored value, <br />
	aand press the <strong>CLEAR</strong> button to clear the localStorage data.
	</p>
	<p><textarea id="theValue" rows="5" cols="30"></textarea></p>
	<input id="storeIt" type="button" value="submit" />
	<input id="restoreIt" type="button" value="restore" />
	<input id="clearIt" type="button" value="clear" />

	<script type="text/javascript">
	/**
	* @ NAME: CacheProvider
	* @ DESC: the cache provider app based on javascript
	* @ COPY: http://blog.jeffbalogh.org/ && sofish
	*/

	var CacheProvider = function(){
	// set cache
	this._cache = {};
	};

	// detect localStorage
	try {
	CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage']
	} catch(msg) {
	CacheProvider.hasLocalStorage = false;
	};

	// make it able to store object
	if( CacheProvider.localStorage ){
	Storage.prototype.setObj = function(key, value){
	this.setItem(key, JSON.stringify(value));
	};
	Storage.prototype.getObj = function(key){
	return JSON.parse(this.getItem(key));
	};
	};

	// core of the CacheProvider
	CacheProvider.prototype = {
	/**
	* {string} k: the key
	* {boolean} l: get this from local storage?
	* {boolean} o: is the value you put in local storage an object?
	*/
	get:function(k, l, o){
	if(l && CacheProvider.hasLocalStorage){
	var action = o ? 'getObj' : 'getItem';
	return localStorage[action](k) \|\| undefined;
	} else {
	return this._cache[k] \|\| undefined;
	}
	},

	/**
	* {string} k: the key
	* {object} v: any kind of value you want to store
	* {boolean} l: put this in local storage
	*/
	set:function(k, v, l){
	if(l && CacheProvider.hasLocalStorage){
	if(typeof v !== 'string'){
	// make assumption if it's not a string, then we're storing an object
	localStorage.setObj(k,v);
	} else {
	try {
	localStorage.setItem(k, v);
	} catch(msg) {
	if(msg.name == 'QUOTA_EXCEEDED_ERR'){
	//debugger
	throw new Exception(v);
	return;
	}
	}
	}
	} else {
	// put in our local object
	this._cache[k] = v;
	}
	// return our newly cache item
	return v;
	},

	/**
	* {String} k - the key
	* {Boolean} l - put this in local storage
	* {Boolean} o - is this an object you want to put in local storage?
	*/
	clear:function(k, l, o){
	if(l && CacheProvider.hasLocalStorage){
	localStorage.removeItem(k);
	}
	// delete in both caches
	delete this._cache[k];
	}
	};



	// set up a new CacheProvider instance
	var cache = new CacheProvider,
	s = document.getElementById('storeIt'),
	r = document.getElementById('restoreIt'),
	c = document.getElementById('clearIt'),
	v = document.getElementById('theValue');

	// testing the capacity of localStorage
	s.onclick = function(){
	// store the value
	cache.set('store', v.value, 1);
	};
	r.onclick = function(){
	// restore the stored value
	v.value = cache.get('store', 1);
	};
	c.onclick = function(){
	// clear the cache
	cache.clear('store', 1)
	}

	</script>
	</body>
	</html>