【移动应用开发技术】Web Storage全解析

【移动应用开发技术】WebStorage全解析

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userDataBehavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用FlashLocalStorage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用WebDatabase，可以像客户端程序一样使用SQL（不过WebDatabase标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限）；假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用WebStorage。本文主要从各个方面介绍一下WebStorage的具体情况。sessionStorage与localStorageWebStorage实际上由两部分组成：sessionStorage与localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。为什么选择WebStorage而不是Cookie？与Cookie相比，WebStorage存在不少的优势，概括为以下几点：1.存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。2.存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而WebStorage中的数据则仅仅是存在本地，不会与服务器发生任何交互。3.更多丰富易用的接口：WebStorage提供了一套更为丰富的接口，使得数据操作更为简便。4.独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。兼容性如何？接下来的各种测试是在以下浏览器中进行的：IE8、Firefox3.6、Chrome5、Safari4、Opera10，事实证明各个浏览器在API方面的实现基本上一致，存在一定的兼容性问题，但不影响正常的使用。sessionStorage测试本节主要针对sessionStorage的一些特性进行了测试，测试的重点在于各个浏览器对于session的定义以及跨域情况。测试方法很简单：打开页面A，在页面A中写入当前的session数据，然后通过页面A中的链接或按钮使用不同的方式进入下页面B，如果页面B中能够访问到页面表1sessionStorage兼容性测试

从表1中可以看出，处于安全性考虑所有浏览器下session数据都是不允许跨域访问的，包括跨子域也是不允许的。其他方面主流浏览器中的实现较为一致。API测试方法包括以下几个：setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)；属性包括length、remainingSpace(非标准)。不过存储数据时可以简单的使用localStorage.key=value的方式。测试地址为：/pages/html5/web_storage/local/localStorage.html测试结果另人满意，标准中定义的接口在各个浏览器中都已实现，此外IE8下新增了一个非标准的remainingSpace属性，用于获取存储空间中剩余的空间。结果如表2：表2API测试

此外关于setItem(key,value)方法中的value类型，理论上可以是任意类型，不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地，因此如果是自定义的类型则需要自己定义有意义的toString方法。事件标准的事件为onstorage，当存储空间中的数据发生变化时触发。此外，IE8中新增了一个onstoragecommit事件，当数据写入的时候触发。onstorage事件中的事件对象应该支持以下属性：

Thekeyattributerepresentsthekeybeingchanged.

TheoldValueattributerepresentstheoldvalueofthekeybeingchanged.

ThenewValueattributerepresentsthenewvalueofthekeybeingchanged.

Theurlattributerepresentstheaddressofthedocumentwhosekeychanged.

ThestorageAreaattributerepresentstheStorageobjectthatwasaffected.

Thekeyattributerepresentsthekeybeingchanged.

TheoldValueattributerepresentstheoldvalueofthekeybeingchanged.

ThenewValueattributerepresentsthenewvalueofthekeybeingchanged.

Theurlattributerepresentstheaddressofthedocumentwhosekeychanged.

ThestorageAreaattributerepresentstheStorageobjectthatwasaffected.对于这一标准的实现，webkit内核的浏览器（Chrome、Safari）以及Opera是完全遵循标准的，IE8则只实现了url，Firefox下则均未实现。测试地址为：/pages/html5/web_storage/local/event.html具体结果见表3。表3onStorage事件对象属性测试

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

缺陷与不足WebStorage的缺陷主要集中在其安全性方面，具体体现在以下两点：1.浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。测试地址：/pages/html5/web_storage/local/corss_domain_js_access.html2.存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。跨页面通讯示例示例地址：/pages/html5/web_storage/app/play.html玩法很简单：选择