浏览器本地存储(1)

浏览器存储方式主要下面几种：

• Cookie
  4096字节；缺点：存储量小，请求头附带cookie带来性能问题。
• Flash Share Object
  默认支持100k，跨浏览器存储最好的方式，毕竟现在没有安装flash插件的用户是很少的；缺点：需要加载一个swf文件，个别用户不支持flash。
  有一个基于jQuery的插件叫 jStore ，就是通过Flash Share Object实现的。
• IE的 UserData
  最少也能支持640k，IE8后已经支持DOM Storage；缺点：IE only。
• DOM Storage
  默认支持5M存储量；缺点：IE7，IE6不支持。
• Google Gears
  功能最强；缺点：但需要安装软件，而且，安装的用户是较少的。

这里主要学习 IE 的 UserData 和 DOM Storage

DOM Storage

支持：Firefox, Chrome, Opera, Safari, IE8+
关于Web Storage的w3c文档，请移步 http://dev.w3.org/html5/webstorage/
DOM Storage 分为两种， sessionStorage 和 localStorage，顾名思义，sessionStorage是指在当前窗口会话中持续保存的数据，哪怕你在不同的网站中跳转也不会清除，但关闭窗口后就没了；localStorage是在本地永久存储的。

方法：

• key(index) 根据索引获取值
• getItem(key) 获取 key 的值
• setItem(key, data) 设置 key 的值
• removeItem(key) 删除 key
• clear() 清除所有的key

属性：

• length 当前存储的个数

IE UserData

支持：IE5+
关于UserData更详细的文档，请看http://msdn.microsoft.com/en-us/library/ms531424.aspx
通过给 xml 或者 html 标签添加 behavior 来支持 userData
例如：
<input style="behavior:url('#default#userData')" id="userData">
或者，通过脚本来设置：
object.style.behavior = "url('#default#userData')"
object.addBehavior ("#default#userData")

方法：

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

属性：

• expires 设置或者获取 userData behavior 保存数据的失效日期，不设置则为永久。
• XMLDocument 获取 XML 的引用。

兼容的解决方法

这是我写的一个通用的本地存储的插件，缺点：数据不能跨浏览器，比如在IE里保存的，只能在IE里读取：
测试通过的浏览器：IE6, IE7, IE8, Firefox, Chrome, Safari, Opera

支持的方法：

• get(key) 读取key的值
• set(key, value) 设置key的值
• del(key) 删除key
• support 检测是否支持本地存储

使用示例：
if ( Storage.support() ) Storage.set('username', 'foxling');

Demo猛击这里

var Storage = function(win, doc){
		var hasSupport = true,
			store = win.localStorage,
			STORE_NAME = 'localstorage',
			obj,
			support = function (){ return hasSupport },
			error = function(){ throw new Error("don't support localStorage") };

		if (store && store.getItem){
			obj = {
				set : function(key, value){
					return store.setItem(key, value);
				},
				get : function(key){
					return store.getItem(key);
				},
				del : function(key){
					return store.removeItem(key);
				}
			};
		}else{
			store = doc.documentElement;
			try{
				store.addBehavior('#default#userdata');
				store.save(STORE_NAME);
			}catch(e){
				hasSupport = false;
			}
			if (hasSupport){
				obj = {
					set : function(key, value){
						store.setAttribute(key, value);
						store.save(STORE_NAME);
					},
					get : function(key){
						store.load(STORE_NAME);
						return store.getAttribute(key);
					},
					del : function(key){
						store.removeAttribute(key);
						store.save(STORE_NAME);
					}
				};

			}
		}
		if (!obj){
			obj = {
				set:error,
				get:error,
				del:error
			};
		}
		obj.support = support;
		return obj;
	}(window, document);