sofish · August 15, 2010 16:32
diff --git a/localStorage.html b/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>