HTML5本地存储备份解决方案

还有 真实存储，它使用 Gears 作为后备。

我使用 坚持(Github 存储库) ，它可以无缝地、透明地对代码处理客户端存储。您使用单个 API 并获得对以下后端的支持:

• Flash: Flash 8持久存储。
• Gear: 基于 GoogleGears 的持久存储。
• LocalStorage: HTML5草稿存储。
• Whatwg _ db: HTML5草案数据库存储。
• globalstorage: HTML5 draft storage (old spec).
• 即: Internet Explorer 的用户数据行为。
• cookie: Cookie-based persistent storage.

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

你看过现代维基百科上的填充页面吗？

Https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills

在那个页面上寻找网络存储部分，你会看到10个潜在的解决方案(截至2011年7月)。

祝你好运！ 马克

用于 DOM 存储的 MDN 页提供了几种使用 cookie 的变通方法。

我个人更喜欢 amplify.js。它在过去的工作真的很好，我推荐它为所有本地存储的需要。

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

Js 在其他浏览器上使用 userData、 IE 和 localStorage。

• 它不会尝试做任何过于复杂的事情

• No cookies, no flash, no jQuery needed.

• 清洁空气污染指数。

• 5kb 压缩

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

基于纯 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>​

约翰逊:

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

躺椅似乎也是一个不错的选择

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

我已经删除了创建全局 ret变量的引用，还删除了在 BrowserStorage.get()方法中将存储的“ true”和“ false”字符串解析为布尔值的操作，如果试图实际存储字符串“ true”或“ false”，这可能会导致问题。

由于本地存储 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);
}
};
})();