JavaScript本地存储实践

一、各类存储方案的对比

- Cookies：浏览器均支持，容量为4KB
- UserData：仅IE支持，容量为64KB
- Flash：100KB，非HTML原生，须要插件支持
- Google Gears SQLite ：须要插件支持，容量无限制
- LocalStorage：HTML5，容量为5M

二、Cookie的缺点

1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像文件或邮件那样的大数据。

2）只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送（这解释为何本地文件不能测试cookie）。一方面，这意味着cookie数据在网络上是可见的，不加密的状况下有安全风险；另外一方面，不管加载哪一个相关url，cookie中的数据都会消耗网络带宽。

三、LocalStorage的缺点

① localstorage大小限制在500万字符左右，各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想一想就以为吓人啊）
④ localstorage不能被爬虫爬取，不要用它彻底取代URL传参

四、LocalStorage的api

api名称	介绍	实例
setItem(key,value)	设置本地存储数据	LocalStorage.setItem("myFirstKey","myFirstValue"); LocalStorage.myFirstKey = myFirstValue; LocalStorage["myFirstKey"] ="myFirstValue";
getItem(key)	获取本地存储数据	LocalStorage.getItem("myFirstKey");
removeItem(key)	删除指定键数据	LocalStorage.removeItem("myFirstKey");
clear()	删除全部数据	LocalStorage.clear();

五、UserData

• 基本语法 :
  XML: <Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” />
  HTML: <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID>
• Script:
  object.style.behavior = “url(‘#default#userData’)”
  object.addBehavior (“#default#userData”)
• 属性:
  expires 设置或者获取 userData behavior 保存数据的失效日期。
  XMLDocument 获取 XML 的引用。
• 方法:
  getAttribute() 获取指定的属性值。
  load(object) 从 userData 存储区载入存储的对象数据。
  removeAttribute() 移除对象的指定属性。
  save(object) 将对象数据存储到一个 userData 存储区。
  setAttribute() 设置指定的属性值。

要使用userData存储功能，必须先创建一个HTML标签，而后将behavior:url(‘#default#userData’)样式属性加上去，等于说userData是寄存于HTML标签的，固然不是全部标签都是能够的，仅限于部分标签。要了解更多的信息能够访问MSDN的《userData Behavior》 。

如今使用的全浏览器支持的本地存储方案：browser-storage.js

代码值得优化的地方，根据不一样浏览器选择方案时，应该在初始化时实例不一样的对象，调用相同的接口方法，而不该该每一个方法里面去断定。