HTML5本地存储回退解决scheme

我正在寻找JavaScript库和代码,可以在没有本地支持的浏览器上模拟localStorage

基本上,我想编写我的网站使用localStorage存储数据,并知道它仍然可以在本地支持它的浏览器上工作。 这意味着一个库会检测是否存在window.localStorage并使用它。 如果它不存在,那么它会通过在window.localStorage命名空间中创build自己的实现来创build某种本地存储的回退方法。

到目前为止,我find了这些解决scheme:

  1. 简单的sessionStorage实现。
  2. 一个使用cookie的实现(对这个想法不感到兴奋)。
  3. Dojo的dojox.storage ,但这是它自己的东西,不是真正的后备。

我明白,Flash和Silverlight也可以用于本地存储,但没有发现任何使用它们作为标准HTML5 localStorage的后备。 也许Google Gears也有这个function呢?

请分享您find的任何相关的图书馆,资源或代码片段! 我会特别感兴趣的纯JavaScript或基于jQuery的解决scheme,但我猜这是不太可能的。

我使用PersistJS ( github仓库 ),它可以无缝,透明地处理客户端存储。 您使用单个API并获得对以下后端的支持:

  • Flash:Flash 8持久存储。
  • 齿轮:基于Google Gears的持久性存储。
  • localstorage:HTML5草稿存储。
  • whatwg_db:HTML5草稿数据库存储。
  • globalstorage:HTML5草稿存储(旧规格)。
  • 即:Internet Explorer用户数据行为。
  • cookie:基于Cookie的持久存储。

任何这些都可以被禁用,例如,如果你不想使用cookies。 借助这个库,您将在IE 5.5+,Firefox 2.0+,Safari 3.1+和Chrome中获得本机客户端存储支持; 和如果浏览器有Flash或Gears插件辅助支持。 如果你启用了cookies,它将在任何情况下工作(但是将被限制在4kB)。

纯JS基于简单的localStorage填充:

演示: 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 { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) { ret = c.substring(nameEQ.length,c.length); switch (ret) { case 'true': return true; case 'false': return false; default: return ret; } } } return null; } }, del: function(name) { if( this.localStoreSupport() ) { localStorage.removeItem(name); } else { this.set(name,"",-1); } } }​ 

你看过Modernizr wiki上的polyfill页面吗?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

查找该页面上的webstorage部分,您将看到10个潜在的解决scheme(截至2011年7月)。

祝你好运! 标记

我个人比较喜欢amplify.js 。 它过去对我来说工作得非常好,我推荐它满足所有本地存储需求。

支持IE 5+,Firefox 2+,Safari 4+,Chrome,Opera 10.5+,iPhone 2+,Android 2+并提供一致的API来处理存储跨浏览器

下面是Aamir Afridi响应的整理版本,它将所有的代码封装在本地范围内。

我已经删除了创build全局retvariables的引用,并且还删除了在BrowserStorage.get()方法中将存储的“true”和“false”stringparsing为布尔值的情况,如果有人试图实际存储string“真”或“假”。

由于本地存储API仅支持string值,所以仍然可以通过将所述数据编码为JSONstring来存储/检索JavaScript可变数据及其适当的数据types,然后可以使用JSON编码/解码库(例如https: //github.com/douglascrockford/JSON-js

 var BrowserStorage = (function() { /** * Whether the current browser supports local storage as a way of storing data * @var {Boolean} */ var _hasLocalStorageSupport = (function() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } })(); /** * @param {String} name The name of the property to read from this document's cookies * @return {?String} The specified cookie property's value (or null if it has not been set) */ var _readCookie = function(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; }; /** * @param {String} name The name of the property to set by writing to a cookie * @param {String} value The value to use when setting the specified property * @param {int} [days] The number of days until the storage of this item expires */ var _writeCookie = function(name, value, days) { var expiration = (function() { if (days) { var date = new Date(); date.setTime(date.getTime() + (days*24*60*60*1000)); return "; expires=" + date.toGMTString(); } else { return ""; } })(); document.cookie = name + "=" + value + expiration + "; path=/"; }; return { /** * @param {String} name The name of the property to set * @param {String} value The value to use when setting the specified property * @param {int} [days] The number of days until the storage of this item expires (if storage of the provided item must fallback to using cookies) */ set: function(name, value, days) { _hasLocalStorageSupport ? localStorage.setItem(name, value) : _writeCookie(name, value, days); }, /** * @param {String} name The name of the value to retrieve * @return {?String} The value of the */ get: function(name) { return _hasLocalStorageSupport ? localStorage.getItem(name) : _readCookie(name); }, /** * @param {String} name The name of the value to delete/remove from storage */ remove: function(name) { _hasLocalStorageSupport ? localStorage.removeItem(name) : this.set(name, "", -1); } }; })(); 

store.js在其他浏览器上使用userData和IE以及localStorage。

  • 它不会尝试做太复杂的事情

  • 没有cookies,没有闪光,没有jQuery需要。

  • 清理API。

  • 5 kb压缩

https://github.com/marcuswestin/store.js

DOM存储的MDN页面提供了几个使用cookie的解决方法。

Lawnchair似乎也是一个很好的select

除了小而外,一把椅子就像沙发一样。 非常适合需要轻量级,自适应,简单而优雅的持久性解决scheme的html5移动应用程序。

  • 集合。 一个lawnchair实例实际上只是一个对象的数组。
  • 适应性持久性。 底层商店被抽象为一致的界面。
  • 可插拔的收集行为。 有时我们需要收集帮手,但不总是。

有真正的存储 ,它使用齿轮作为后备。