Web Storage API
2012-06-18 16:19 BlackBird 阅读(2319) 评论(0) 编辑 收藏 举报web storage内容
web storage提供在浏览器端通过key/value的方式存储数据。包括以下两部分：
- session storage（会话级别的存储，会话结束后失效）
- local storage（持久性存储，用户主动删除或js操作清空）
web storage优势
web storage的提出的初衷主要是为了解决cookie在数据存储时的一些不足。和cookie相比，web storage主要有以下几点优势：
- 存储空间大，默认5m
- 节省带宽，不用在每次请求中发送到服务器端
- 操作简便，封装了很多便捷的操作方法
- 数据独立性强
支持web Storage的浏览器
- chrome4+
- FF3.5+
- IE8+
- safari4+
- opera10.5+
JS操作对象
使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage.
这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。
Storage类的相关成员如下：
| 成员名 | 方法参数 | 描述 |
| length | 属性 | 获取存储数据的条数 |
|
key(n) |
n:索引值 | 根据索引值，返回键名 |
| getItem(key) | key:键名 | 根据键名，获取数据值 |
| setItem(key,value) | key:键名 value:键值 | 根据键名和键值设置数据项，如果键名已经存在，则覆盖值 |
| removeItem(key) | key:键名 | 根据键名删除一个数据项 |
| clear() | 无 | 清空当前的Storage对象 |
所有支持web Storage的浏览器均实现了以上标准方法，另外IE8还自己实现了remainingSpace用于查看剩余的存储空间
事件：
onstorage，当发生存储相关操作的时候触发
标准中事件对象的属性：
| 事件属性 | 描述 |
| key | 返回发生改变的数据项的键名 默认空字符串 |
| oldValue | 返回发生改变的数据项的旧值 默认null |
| newValue | 返回发生改变的数据项的新值 默认null |
| url | 返回发生改变的数据的页面所对应的url 默认空字符串 |
| storageArea | 返回代表所属的storage对象 默认null |
其中，webkit内核的浏览器（Chrome、Safari）以及Opera是完全遵循标准的，IE8则只实现了url，Firefox下则均未实现。
各个浏览器对于事件注册的对象也不一致。其中IE和FF是document对象，chrome和opera是window对象，safari是body。
local storage的渐进设计方案
对于不支持的浏览器，可以做渐进设计，考虑的顺序如下：
- localStorage
- globalStorage
- userdata
- Cookie
session storage 的会话
session storage主要存储会话级别的数据，会话结束后，数据自动销毁。
关于浏览器会话在页面跳转时的理解，各个浏览器实现有些差异，具体表现如下：
| 浏览器 | 原窗口 | target="_blank" | window.open | ctrl+click | 跨域访问 |
| IE8 | 是 | 是 | 是 | 是 | 否 |
| FF3.6 | 是 | 是 | 是 | 否 | 否 |
| chrome5 | 是 | 是 | 是 | 否 | 否 |
| safari4 | 是 | 否 | 是 | 否 | 否 |
| opera | 是 | 否 | 否 | 否 | 否 |
web storage的安全注意事项：
- 明文存储，不要存敏感信息
- 不能抵御xss漏洞攻击
- 对于存储的数据要严格过滤，防止自身产生存储型xss攻击
- 容易遭受跨目录攻击
- 容易遭受DNS欺骗攻击
