JavaScript本地存储实践

1、各种存储方案的对比

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

2、Cookie的缺点

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

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

3、LocalStorage的缺点

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

4、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();

5、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

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

转载于:https://www.cnblogs.com/ivaLi/p/5673387.html