JS本地存储的一些方法
那天组上知识分享，不知道分享什么，突然想到有次星哥提到本地存储，于是熬了个晚夜总结了一下，第二天看来效果还行。下面贴出来记录一下。浏览器本地存储主要有5种方式，分别如下：
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
功能最强；缺点：但需要安装软件，而且，安装的用户是较少的。
【DOM Storage】
支持：Firefox, Chrome, Opera, Safari, IE8+
关于Web Storage的w3c文档：http://dev.w3.org/html5/webstorage/
分类： sessionStorage 和 localStorage。顾名思义，sessionStorage是指在当前窗口会话中持续保存的数据，哪怕你在不同的网站中跳转也不会清除，但关闭窗口后就没了；localStorage是在本地永久存储的。
方法：
key(index) 根据索引获取值
getItem(key) 获取 key 的值
setItem(key, data) 设置 key 的值
removeItem(key) 删除 key
clear() 清除所有的key
属性：
length 当前存储的个数
示例：
1 2 3 4 | store = window.localStorage; store.setItem(‘a’, 123); alert(store.getItem(‘a’)); store.removeItem(‘a’); |
【IE UserData】
支持：IE5+
关于UserData的详细文档：http://msdn.microsoft.com/en-us/library/ms531424.aspx
使用：<input style=”behavior:url(‘#default#userData’)”>
或者，通过脚本来设置：
object.style.behavior = “url(‘#default#userData’)”
object.addBehavior (“#default#userData”)
数据：
在XP下，一般位于C:\Documents and Settings\用户名\UserData，有些时候会在C:\Documents and Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData。
在Vista下，位于C:\Users\用户名\AppData\Roaming\Microsoft\Internet Explorer\UserData。
方法：
getAttribute() 获取指定的属性值。
load(object) 从 userData 存储区载入存储的对象数据。
removeAttribute() 移除对象的指定属性。
save(object) 将对象数据存储到一个 userData 存储区。
setAttribute() 设置指定的属性值。
属性：
expires 设置或者获取 userData behavior 保存数据的失效日期，不设置则为永久。
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 | store = document.documentElement; store.addBehavior('#default#userdata'); var STORE_NAME = ‘my_userdata’ store.save(STORE_NAME); store.setAttribute(‘a’, 123); store.save(STORE_NAME); store.load(STORE_NAME); store.getAttribute(‘a’); store.removeAttribute(‘a’); store.save(STORE_NAME); |
下面贴一段兼容代码供大家参考：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 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); |
赞助商广告
