产品设计

Web Storage全解析

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

表4 onStorage事件注册对象

  事件注册对象 备注
IE8 document  
Firefox3.6 document 必须使用document.addEventListener注册,否则无效。
Chrome5 window  
Safari4 body  
Opera10 window  

 

缺陷与不足

Web Storage的缺陷主要集中在其安全性方面,具体体现在以下两点:

1. 浏览器会为每个域分配独立的存储空间,即脚本在域A中是无法访问到域B中的存储空间的,但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。测试地址:http://varnow.org/pages/html5/web_storage/local/corss_domain_js_access.html

2. 存储在本地的数据未加密而且永远不会过期,极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。

跨页面通讯示例

示例地址:http://varnow.org/pages/html5/web_storage/app/play.html

N-Dimension

玩法很简单:选择 打开多个窗口,页面会自动打开并定位4个新窗口,小球会在多个窗口间运动,在小球运动的过程中可以拖动窗口或者打开新的窗口来控制小球进入新的区域。

实现原理:每个新打开的窗口会将自己的坐标以及大小写入localStorage,小球在运动到窗口边界时会检测小球将要进入的下一个窗口,如果找到该窗口则将小球坐标写入并通知新窗口接收小球。

希望看到您的想法,请您发表评论x