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，但我猜这是不太可能的。

Answer 1

我使用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）。

Answer 2

纯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); } } }​ 

Answer 3

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

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

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

祝你好运！ 标记

Answer 4

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

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

Answer 5

下面是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); } }; })(); 

Answer 6

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

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

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

• 清理API。

• 5 kb压缩

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

Answer 7

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

Answer 8

Lawnchair似乎也是一个很好的select

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

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

Answer 9

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