代码改变世界

Web Storage API

2012-06-18 16:19  BlackBird  阅读(2204)  评论(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欺骗攻击