网络编程
位置:首页>> 网络编程>> 网页设计>> HTML5 Web Storage全解析(2)

HTML5 Web Storage全解析(2)

作者:Miller 来源:百度泛用户体验 发布时间:2010-06-26 13:06:00 

标签:Cookie,存储,Web,Database,heml5

API测试

方法包括以下几个:

setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index);
属性包括length、remainingSpace(非标准)。不过存储数据时可以简单的使用localStorage.key=value的方式。

测试地址为:http://varnow.org/pages/html5/web_storage/local/localStorage.html
测试结果另人满意,标准中定义的接口在各个浏览器中都已实现,此外IE8下新增了一个非标准的remainingSpace属性,用于获取存储空间中剩余的空间。结果如表2:

表2 API测试

此外关于setItem(key,value)方法中的value类型,理论上可以是任意类型,不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地,因此如果是自定义的类型则需要自己定义有意义的toString方法。

事件

标准的事件为onstorage,当存储空间中的数据发生变化时触发。此外,IE8中新增了一个onstoragecommit事件,当数据写入的时候触发。onstorage事件中的事件对象应该支持以下属性:

  • The key attribute represents the key being changed.

  • The oldValue attribute represents the old value of the key being changed.

  • The newValue attribute represents the new value of the key being changed.

  • The url attribute represents the address of the document whose key changed.

  • The storageArea attribute represents the Storage object that was affected.

对于这一标准的实现,webkit内核的浏览器(Chrome、Safari)以及Opera是完全遵循标准的,IE8则只实现了url,Firefox下则均未实现。

测试地址为:http://varnow.org/pages/html5/web_storage/local/event.html

具体结果见表3。

表3 onStorage事件对象属性测试

此外,不同的浏览器事件注册的方式以及对象也不一致,具体如表4。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com