Web Storage API

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返回发生改变的数据项的旧值  默认nullnewValue返回发生改变的数据项的新值  默认nullurl返回发生改变的数据的页面所对应的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.openctrl+click跨域访问IE8是是是是否FF3.6是是是否否chrome5是是是否否safari4是否是否否opera是否否否否

 

web storage的安全注意事项：

• 明文存储，不要存敏感信息
• 不能抵御xss漏洞攻击
• 对于存储的数据要严格过滤，防止自身产生存储型xss攻击
• 容易遭受跨目录攻击
• 容易遭受DNS欺骗攻击

   转载自blackbird的博客：http://www.cnblogs.com/blackbird/archive/2012/06/18/2553718.html