HTML5 Local Storage fallback solutions [closed]
Pure JS based simple localStorage polyfill:
Demo: http://jsfiddle.net/aamir/S4X35/
HTML:
<a href='#' onclick="store.set('foo','bar')">set key: foo, with value: bar</a><br/><a href='#' onclick="alert(store.get('foo'))">get key: foo</a><br/><a href='#' onclick="store.del('foo')">delete key: foo</a>JS:
window.store = { localStoreSupport: function() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }, set: function(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else { var expires = ""; } if( this.localStoreSupport() ) { localStorage.setItem(name, value); } else { document.cookie = name+"="+value+expires+"; path=/"; } }, get: function(name) { if( this.localStoreSupport() ) { var ret = localStorage.getItem(name); //console.log(typeof ret); switch (ret) { case 'true': return true; case 'false': return false; default: return ret; } } else { // cookie fallback /* * after adding a cookie like * >> document.cookie = "bar=test; expires=Thu, 14 Jun 2018 13:05:38 GMT; path=/" * the value of document.cookie may look like * >> "foo=value; bar=test" */ var nameEQ = name + "="; // what we are looking for var ca = document.cookie.split(';'); // split into separate cookies for(var i=0;i < ca.length;i++) { var c = ca[i]; // the current cookie while (c.charAt(0)==' ') c = c.substring(1,c.length); // remove leading spaces if (c.indexOf(nameEQ) == 0) { // if it is the searched cookie var ret = c.substring(nameEQ.length,c.length); // making "true" and "false" a boolean again. switch (ret) { case 'true': return true; case 'false': return false; default: return ret; } } } return null; // no cookie found } }, del: function(name) { if( this.localStoreSupport() ) { localStorage.removeItem(name); } else { this.set(name,"",-1); } }}
I use PersistJS (github repository), which handles client-side storage seamlessly and transparently to your code. You use a single API and get support for the following backends:
- flash: Flash 8 persistent storage.
- gears: Google Gears-based persistent storage.
- localstorage: HTML5 draft storage.
- whatwg_db: HTML5 draft database storage.
- globalstorage: HTML5 draft storage (old spec).
- ie: Internet Explorer userdata behaviors.
- cookie: Cookie-based persistent storage.
Any of those can be disabled—if, for example, you don't want to use cookies. With this library, you'll get native client-side storage support in IE 5.5+, Firefox 2.0+, Safari 3.1+, and Chrome; and plugin-assisted support if the browser has Flash or Gears. If you enable cookies, it will work in everything (but will be limited to 4 kB).
have you seen the polyfill page on the Modernizr wiki?
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
look for the webstorage section on that page and you will see 10 potential solutions (as of July 2011).
good luck!Mark