HTML5 中 DOM Storage 的应用

浏览器的本地存储出来也有段时间了。Firefox 是从 2开始支持的，IE 似乎是从 8 才开始支持。 Google Chome 似乎暂时还不支持。

    关于客户端存储的标准，可以参考这里:

    http://www.whatwg.org/specs/web-apps/current-work/#scs-client-side

    这一个存储是基于DOM的，也可以说是未来各个浏览器都会支持的一项功能。

    浏览器客户端存储方式主要有四种：
   1、 cookie
   2、 flash shared object
   3、 IE的 userdata
   4、 DOM storage

    我在 anehta 的水印系统中，使用的是第二种方式：FSO。
    yahoo 在 安全印章系统中，还同时使用了 第三种，IE 的 userdata。 不过这个存储的地方在高版本的IE中好像支持不好。 所以未来的趋势肯定是利用 DOM storage。

    DOM storage 分为两种， 一个是 叫做 sessionStorage，另一个叫做 localStorage，这是IE的叫法，在 Firefox 中叫做 globalStorage。（sessionStorage是FF，IE通用）

    从名字就可以看出，sessionStorage是和当前窗口相关的，而localStorage 则是和当前窗口无关的，关了浏览器再开起来还会存在，还能读到。

    对于 javascript 来说， dom storage 实际上就是一个数组。通过非常简单的API调用方式就能够使用DOM Storage。
  
    设置一个值： window.sessionStorage.setItem(key, value);
    读取一个值： window.sessionStorage.getItem(key);
   
    还有其他API，可以参考相关手册。
   

    而 IE 的 localStorage 和 FF的 globalStorage 还是有差别的，感觉 FF 的实现比 IE 要安全。

    因为 globalStorage 有区分域。

    window.globalStorage.namedItem(domain).setItem(key, value);

    通过 namedItem 可以设置域，跨域的访问在FF出会抛出一个安全错误的异常。

    但是这种设置是比较宽泛的，因为甚至可以设置 "com" 这种域名后缀。

    如果设置的是 com，那么整个 *.com 就都能操作存储在该域下的值的。

    但聊胜于无，IE 的 localStorage 是直接操作 localStorage.getItem(key)，没有划分域这一说。

    FF 的 globalStorage 是使用 SQLite 的方式来存储的。每个域下都有5M的空间，远远大于cookie能存储的值。

    前段时间，gmail 的iphone版好像开始存储数据到 localStorage 中，我的博客中也曾经记载这个事情。有安全专家曾担心可能会出现一些对该storage的注射，还需要深度挖掘下利用方式。

    我们知道，XSS Payload 实际上也可以看成是一个javascript的应用，所以使用 DOM Storage ，在XSS中也会起到一些更好的用户体验。

    其中最主要的一个作用就是跨页面(跨域)传递数据。
  
    无论是sessionStorage 还是 localStorage，都能够起到这个作用。

    对于这一点，luoluo在 webzine0x03 中有一篇文章提到了一些tips。那么，现在又多了一种方法了！不同于window对象的是，localStorage是不依赖于当前窗口的！

    不同于cookie， localStorage 是用户清理了cookie之后还存在的，一般是没有 expire 时间的，应该会比较好用。

    最后，我写了如下一个测试页面：
   

<div id="sessionStorage_show">
    sessionStorage Value:
</div>   

<br>

<div id="localStorage_show">
    localStorage Value:
</div>

<input id="set" type="button" value="check" οnclick="set();">

<script>

function set(){
    window.sessionStorage.setItem("test", "this is sessionStorage");
    if (window.globalStorage){
        window.globalStorage.namedItem("a.com").setItem("test", "this is LocalStorage");
    }else{
    window.localStorage.setItem("test", "this is LocalStorage");
}
   
    document.getElementById("sessionStorage_show").innerHTML += window.sessionStorage.getItem("test");
    if (window.globalStorage){
    document.getElementById("localStorage_show").innerHTML += window.globalStorage.namedItem("a.com").getItem("test");
    }else{
    document.getElementById("localStorage_show").innerHTML += window.localStorage.getItem("test");    
}
}

set();

</script>


为了方便有兴趣的朋友继续研究，整理一些参考资料如下：

http://www.niallkennedy.com/blog/2007/01/ajax-performance-local-storage.html

http://ajaxian.com/archives/firefox-2-client-side-storage-and-a-lot-more

https://developer.mozilla.org/en/Storage

http://ejohn.org/blog/dom-storage/

http://www.xul.fr/en/html5/sessionstorage.php