我正在寻找可以在没有本机支持的浏览器上模拟localStorage的JavaScript库和代码。
基本上，我想使用localStorage对我的网站进行编码来存储数据，并且知道它仍然适用于本身不支持它的浏览器。这意味着库会检测window.localStorage是否存在，如果存在则使用它。如果它不存在，那么它将通过在window.localStorage命名空间中创建自己的实现来创建某种本地存储的回退方法。
到目前为止，我已经找到了这些解决方案：
我知道Flash和Silverlight也可以用于本地存储，但是没有找到任何使用它们作为标准HTML5 localStorage的后备。也许Google Gears也有这个功能吗？
请分享您找到的所有相关库，资源或代码段！我对纯javascript或基于jquery的解决方案特别感兴趣，但我猜这不太可能。
答案 0 :(得分：55)
基于纯JS的简单localStorage polyfill：
演示：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);
}
}
}
答案 1 :(得分：54)
我使用PersistJS（github repository），它可以无缝且透明地处理客户端存储。您使用单个API并获得对以下后端的支持：
如果您不想使用Cookie，则可以禁用其中任何一项。使用此库，您将获得IE 5.5 +，Firefox 2.0 +，Safari 3.1+和Chrome中的本机客户端存储支持;如果浏览器有Flash或Gears，则提供插件辅助支持。如果您启用了cookie，它将适用于所有内容（但限制为4 kB）。
答案 2 :(得分：19)
您是否在Modernizr wiki上看到了polyfill页面？
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
在该页面上查找webstorage部分，您将看到10个可能的解决方案（截至2011年7月）。
祝你好运！ 标记答案 3 :(得分：12)
以下是Aamir Afridi的响应的整理版本，它将所有代码封装在本地范围内。
我删除了创建全局ret变量的引用，并删除了存储＆＃34; true＆＃34;的解析。和＆＃34;假＆＃34;将字符串转换为BrowserStorage.get()方法中的布尔值，如果一个人试图实际存储字符串＆＃34; true＆＃34;或＆＃34; false＆＃34;。
由于本地存储API仅支持字符串值，因此可以通过将所述数据编码为JSON字符串来存储/检索JavaScript变量数据及其适当的数据类型，然后可以使用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);
}
};
})();
答案 4 :(得分：10)
我个人更喜欢amplify.js。它在过去对我来说非常好用，我建议它满足所有本地存储需求。
支持IE 5 +，Firefox 2 +，Safari 4 +，Chrome，Opera 10.5 +，iPhone 2 +，Android 2+，并提供一致的API来处理存储跨浏览器
答案 5 :(得分：3)
store.js在其他浏览器上使用userData和IE以及localStorage。
它不会尝试做任何太复杂的事情
没有cookie，没有flash，也不需要jQuery。
清洁API。
5 kb压缩
答案 6 :(得分：1)
MDN page for DOM storage提供了几种使用Cookie的解决方法。
答案 7 :(得分：1)
Lawnchair似乎也是一个不错的选择
除了较小的外面，草坪椅就像沙发一样。完善 对于html5移动应用程序，需要轻量级，自适应，简单和 优雅的持久性解决方案。
- 集合。草坪椅实例实际上只是一系列物体。
- 自适应持久性。底层商店在一致的界面背后抽象。
- 可插拔的收集行为。有时我们需要收集帮助，但并非总是如此。
答案 8 :(得分：0)
有realstorage，它使用Gears作为后备。