asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
有时候我们在前端开发中为了提高用户体验,减少向服务器请求的次数,常常要在用户的电脑上存储数据,即要实现浏览器的本地存储数据功能。我在这里整理了一下常用的几种方案(Demo演示见这里)。

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部分声明如下样式:
Quote:
.userData {behavior:url(#default#userdata);}
或者使用如下js代码来声明:

Quote:

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


(2)成员:

Quote:

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

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

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

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

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

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

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



(3)示例:

Quote:

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 中,我们可以在tc-eb-test00.tc.baidu.com 上的页面内使用globalStorage[“baidu.com“][“t“]=“test“来赋值,但是到了firefox3这么做却会得到一个错误 提示,原因是firefox3的安全策略要求在使用 globalStorage时,指定的域名和实际的域名必须严格匹配!

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

说明:

This section is non-normative.

使用:

Code:

[可以先修改代码再运行]

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.

使用:

Code:

[可以先修改代码再运行]

备注:

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

5.其它解决方案

Google Gear:Google开发出的一种本地存储技术;

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

这两种方法的优点是:能支持所有的OS和浏览器(Google Gear目前仅支持IE5+和Firefox1.5+);缺点是需要用户安装额外的插件,使用起来不如前面其它3种方法简便。
posted on 2008-08-23 22:20 汪杰 阅读(485) 评论(1)  编辑 收藏 引用 所属分类: javascript

FeedBack:
# re: globalStorage
2008-08-23 23:18 | 汪杰
globalStorage

这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,并且存储容量比IE的userdata大得多,一个域下面是5120k。和sessionStorage一样,域中任何一个页面存储的信息都能被所有的页面共享。
作用域

globalStorage['z.baidu.com'] 所有z.baidu.com下面的页面都可以使用这块空间
globalStorage['baidu.com'] 所有baidu.com下面的页面都可以使用这块空间
globalStorage['com']:所有com域名都可以 共享的使用这一块空间
globalStorage[''] :所有页面都可以使用的空间

现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。
过期时间

按照HTML5的描述,globalStorage只在安全问题或者当用户要求时才会过期,浏览器应该避免删除那些正在被脚本访问的数据,并且userdata应该是用户可写的。

因此我们的脚本要能够控制过期时间,可以在globalStorage的某个区域存储过期时间,在load的时候判断是否过期,可以在一定程度上解决过期时间的问题。

存储时,同时存储过期时间
Save = function(content, expires, attribute, fileName){
var date = new Date();
date.setSeconds(date.getSeconds() + expires);
globalStorage[domain][fileName + "__expires"] = date.getTime();
}
Load时判断是否过期,过期则删除:
Load = function(attribute, fileName){
var date = new Date();
if(parseInt(globalStorage[domain][fileName + "__expires"]) < parseInt(date.getTime()) ){
d.Remove(attribute, fileName);
d.Remove(attribute, fileName + “__expires”);
}
return globalStorage[domain][fileName + attribute];
}
一个客  回复  更多评论
  
只有注册用户登录后才能发表评论。

<2006年7月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 456701
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜