javascript本地存储解决方案 – Benjamin

本地存储的主要方案有：
Flash SharedObject、Cookie、LocalStorage、SessionStorage、UserData、Silverlight、Open Database等。

1.Cookie:在web中得到广泛应用，但局限性非常明显，主要有以下几点：
a)容量太小(4KB)；
b)每个域名cookie个数有限制；
c)有些站点会因为出于安全的考虑而禁用cookie；
d)cookie没有想象中的那么安全；
e)cookie的内容会随着页面请求一并发往服务器，内容很大严重影响性能；

2.Flash SharedObject:使用的是kissy的store模块来调用Flash SharedObject,优缺点如下：
a)容量适中
b)兼容性良好；
c)使用时需要在页面中引入特定的swf和js文件，增加额外负担，处理繁琐；
d)需要依赖flash环境运行。

3.User Data: 是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，IE5.5+都可以兼容。
a)XP:
C:\Documents and Settings\用户名\UserData
C:\Documents and Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData。
b)Vista:
C:\Users\用户名\AppData\Roaming\Microsoft\Internet Explorer\UserData；
c)单个文件的大小限制是128KB,最好能控制64KB以下;
d)一个域名下总共可以保存1024KB的文件，
e)文件个数没有限制。

4.localStorage:优缺点如下：
a)容量大、易用、强大、原生支持；
b)兼容性差些(IE8+/FF/Chrome/Safari)
c)安全性也差些(勿使用localStorage保存敏感信息)。
从上述解决方案可以找到一个适应各浏览器的解决方案(LocalStorage + UserData):
1.UserData
1)基本语法:
<element style=”behavior:url(‘#default#userData’)”></element>

2.script:
object.style.behavior = “url(‘#default#userData’)”;
object.addBehavior(“#default#userData”)

3)属性:
expires 设置或者获取 userData behavior 保存数据的失效日期。

4)方法:
getAttribute() 获取指定的属性值。
load(object) 从 userData 存储区载入存储的对象数据。
removeAttribute() 移除对象的指定属性。
save(object) 将对象数据存储到一个 userData 存储区。
setAttribute() 设置指定的属性值。

5)使用:
要使用userData存储功能，必须先建立一个HTML标签，然后将behavior:url(‘#default#userData’)样式属性加上去，等于说userData是寄存于HTML标签的，当然不是所有标签都是可以的，仅限于部分标签。

2.LocalStorage兼容性

3.兼容性封装:

01	var localUserData = function() {

02	this.host_name = location.hostname ? location.hostname : "localDataPosition";

03

04	this.isLocalStorage = window.localStorage ? true : false;

05

06	this.userData = null;

07

08	if (!this.isLocalStorage && !this.userData) {

09

try {

10	this.userData = document.createElement('INPUT');

11	this.userData.type = "hidden";

12	this.userData.style.display = "none";

13	this.userData.addBehavior ("#default#userData");

14	document.body.appendChild(this.userData);

15	var expires = new Date();

16	expires.setDate(expires.getDate()+365);

17	this.userData.expires = expires.toUTCString();

18	} catch(e) {}

19

20

}

21

22	this.setItem = function(key, value) {

23	if(this.isLocalStorage) {

24	window.localStorage.setItem(key,value);

25

return;

26

}

27	this.userData.load(this.host_name);

28	this.userData.setAttribute(key, value);

29	this.userData.save(this.host_name);

30

}

31

32	this.getItem = function(key) {

33	if(this.isLocalStorage) {

34	return window.localStorage.getItem(key);

35

}

36

37	this.userData.load(this.host_name);

38	return this.userData.getAttribute(key);

39

}

40

41	this.remove = function(key) {

42	if(this.isLocalStorage) {

43	window.localStorage.removeItem(key);

44

return;

45

}

46

47	this.userData.load(this.host_name);

48	this.userData.removeAttribute(key);

49	this.userData.save(this.host_name);

50

}

51

52

};

 参考链接：

http://support.microsoft.com/kb/306070

http://msdn.microsoft.com/zh-cn/vstudio/ms531424

http://caniuse.com/#feat=namevalue-storage

转载声明：

本文标题：javascript本地存储解决方案

本文链接：http://www.zuojj.com/archives/478.html，转载请注明转自Benjamin-专注前端开发和用户体验

喜欢 (0)