跨浏览器的本地存储解决方案

有时候我们在前端开发中为了提高用户体验，减少向服务器请求的次数，常常要在用户的电脑上存储数据，即要实现浏览器的本地存储数据功能。我在这里整理了一下常用的几种方案。

1.针对IE6以上(含)内核的浏览器，我们可以使用UserData 行为（userData Behavior）

说明：

userData 行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。该数据将一直存在，除 非你人为删除或者用脚本设置了该数据的失效期。userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData 存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。userData 行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。 一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。出于安全的考虑，相同协议使用同 一个文件夹保存UserData存储区数据。

使用：

（1）首先必须在行内或文档的head部分声明如下样式：

.userData {behavior:url(#default#userdata);}

或者使用如下js代码来声明：

document.documentElement.addBehavior(”#default#userdata”);

（2）成员：

expires 设置或取得使用userData行为保存数据的失效日期，使用方法：对象ID.expires = UTC格式的时间字符串；

getAttribute() 取得指定的属性值；

load(存储区名) 从userData存储区载入存储的对象数据；

removeAttribute() 删除指定的属性值；

save(存储区名) 将对象存储到一个userData存储区；

setAttribute() 设置指定的属性值；

XMLDocument 取得存储该对象数据的XML DOM引用

（3）示例：

document.documentElement.addBehavior("#default#userdata");

document.documentElement.load("t");

document.documentElement.setAttribute("value", "test");

document.documentElement.save("t");

2.针对Firefox2(含)以上内核的浏览器，我们可以使用globalStorage

说明：

This is a global object (globalStorage) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).

Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we’d have the following storage object available to us:

globalStorage[’developer.mozilla.org’] – All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.

使用：

globalStorage[location.hostname]["t"] = "test";//赋值

var ret = globalStorage[location.hostname]["t"];//取值

globalStorage.removeItem("t");//删除

备注：

在firefox2中，我们可以在test00.aa.test.com 上的页面内使用globalStorage[“test.com“][“t“]=“test“来赋值，但是到了firefox3这么做却会得到一个错误提示，原因是firefox3的安全策略要求在使用 globalStorage时，指定的域名和实际的域名必须严格匹配！

3.Database Storage，HTML5里的内容，目前仅有Safari支持

说明：

This section is non-normative.

使用：

init:function(){
if(!this._inited){
this._db.transaction(function(t){
t.executeSql(“CREATE TABLE “+this.name+” (k TEXT UNIQUE NOT NULL PRIMARY KEY, v TEXT NOT NULL)”,[],function(){});
},function(){});
this._inited = true;
}
},
get:function(key,fn){
var ret = “”;
this._db.transaction(function(t){
t.executeSql(“SELECT v FROM “+this.name+” Where k=?”, [key], function(t, r){
if(r.rows.length>0){
ret=r.rows.item(0)['v'];
if(fn)fn.call(this,ret);};
},function(){
if(fn)fn.call(this,ret);
});
});
},
set:function(key,value){
this.remove(key);
this._db.transaction(function(t){
t.executeSql(“INSERT INTO “+this.name+” (k,v) VALUES (?, ?)”, [key,value],function(){});
},function(){});
},
remove:function(key){
this._db.transaction(function(t){
t.executeSql(“DELETE FROM “+this.name+” WHERE k=?”, [key],function(){});
},function(){});
}

4.针对其它浏览器，如常见的Opera，我们可以使用Cookie

说明：

A cookie is a small piece of information stored by the browser. Each cookie is stored in a name=value; pair called a crumb—that is, if the cookie name is “id” and you want to save the id’s value as “this”, the cookie would be saved as id=this. You can store up to 20 name=value pairs in a cookie, and the cookie is always returned as a string of all the cookies that apply to the page. This means that you must parse the string returned to find the values of individual cookies.

Cookies accumulate each time the property is set. If you try to set more than one cookie with a single call to the property, only the first cookie in the list will be retained.

You can use the Microsoft® JScript® split method to extract a value stored in a cookie.

使用：

function SetCookie(sName, sValue){
var date = new Date();
document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString();
}
function GetCookie(sName){
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++){
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
return null;
}
function DelCookie(sName){
document.cookie = sName + "=" + escape(sValue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;";
}

备注：

现代浏览器一般默认都支持cookie，但是使用cookie也有几个致命的弱点：存储的信息量太少，页面向服务器发送请求的同时cookie也会被发送，无形中浪费用户的带宽。

5.其它解决方案

Google Gear：Google开发出的一种本地存储技术；

Flash：利用Flash也可以实现本地存储

这两种方法的优点是：能支持所有的OS和浏览器(Google Gear目前仅支持IE5+和Firefox1.5+)；缺点是需要用户安装额外的插件，使用起来不如前面其它3种方法简便。

6.一些链接

DOM:Storage

HTTP cookies

Flash Local Storage

Internet Explorer userData behavior

http://www.whatwg.org/specs/web-apps/current-work/#sql

safari的一些杂记

• Tags: JavaScript, 本地存储, 跨浏览器