HTML5缓存机制浅析：移动端Web加载性能优化

Dom Storage存储机制

DOM存储是一套在Web Applications 1.0规范中首次引入的与存储相关的特性的总称，现在已经分离出来，单独发展成为独立的W3C
Web存储规范。DOM存储被设计为用来提供一个更大存储量、更安全、更便捷的存储方法，从而可以代替掉将一些不需要让服务器知道的信息存储到Cookies里的这种传统方法。

上面一段是对Dom Storage存储机制的官方表述。看起来，Dom Storage机制类似Cookies，但有一些优势。

Dom Storage是通过存储字符串的Key/Value对来提供的，并提供5MB（不同浏览器可能不同，分Host）的存储空间（Cookies才4KB)。另外Dom
Storage存储的数据在本地，不像 Cookies，每次请求一次页面，Cookies 都会发送给服务器。

DOM Storage分为sessionStorage和localStorage。localStorage对象和sessionStorage对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage用来存储与页面相关的数据，它在页面关闭后无法使用。而localStorage则持久存在，在页面关闭后也可以使用。

Dom Storage提供了以下的存储接口：

interface Storage { 
readonly attribute unsigned long length; 
[IndexGetter] DOMString key(in unsigned long index); 
[NameGetter] DOMString getItem(in DOMString key); 
[NameSetter] void setItem(in DOMString key, in DOMString data); 
[NameDeleter] void removeItem(in DOMString key); 
void clear();
};<br>

sessionStorage是个全局对象，它维护着在页面会话（page session）期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入（reload）或者被恢复（restores）时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。

<script type="text/javascript">
 // 当页面刷新时，从sessionStorage恢复之前输入的内容
 window.onload = function(){
    if (window.sessionStorage) {
        var name = window.sessionStorage.getItem("name");
        if (name != "" || name != null){
            document.getElementById("name").value = name;
         }
     }
 };
 // 将数据保存到sessionStorage对象中
 function saveToStorage() {
    if (window.sessionStorage) {
        var name = document.getElementById("name").value;
        window.sessionStorage.setItem("name", name);
        window.location.href="session_storage.html";
     }
 }
 </script>
<form action="./session_storage.html">
    <input type="text" name="name" id="name"/>
    <input type="button" value="Save" onclick="saveToStorage()"/>
</form><br>

当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。sessionStorage对象在处理这种情况的时候是最有用的，比如恢复我们在表单中已经填写的数据。

把上面的代码复制到session_storage.html（也可以从附件中直接下载）页面中，用Google Chrome浏览器的不同Page或Window打开，在输入框中分别输入不同的文字，再点击“Save”，然后分别刷新。每个Page或Window显示都是当前Page输入的内容，互不影响。关闭Page，再重新打开，上一次输入保存的内容已经没有了。

Local Storage的接口、用法与Session Storage一样，唯一不同的是：Local Storage保存的数据是持久性的。当前Page关闭（Page
Session结束后），保存的数据依然存在。重新打开Page，上次保存的数据可以获取到。另外，Local Storage是全局性的，同时打开两个Page会共享一份存数据，在一个Page中修改数据，另一个Page中是可以感知到的。

<script>
  //通过localStorage直接引用key, 另一种写法，等价于：
  //localStorage.getItem("pageLoadCount");
  //localStorage.setItem("pageLoadCount", value);
  if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
     localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
     document.getElementById('count').textContent = localStorage.pageLoadCount;
</script>
<p>
    You have viewed this page
    <span id="count">an untold number of</span>
    time(s).
</p> <br>

将上面代码复制到local_storage.html的页面中，用浏览器打开，pageLoadCount的值是1；关闭Page重新打开，pageLoadCount的值是2。这是因为第一次的值已经保存了。

用两个Page同时打开local_storage.html，并分别交替刷新，发现两个Page是共享一个pageLoadCount的。

分析：Dom Storage给Web提供了一种更录活的数据存储方式，存储空间更大（相对Cookies），用法也比较简单，方便存储服务器或本地的一些临时数据。

从Dom Storage提供的接口来看，Dom Storage适合存储比较简单的数据，如果要存储结构化的数据，可能要借助JSON了，将要存储的对象转为JSON字串。不太适合存储比较复杂或存储空间要求比较大的数据，也不适合存储静态的文件等。

在Android内嵌Webview中，需要通过Webview设置接口启用Dom Storage。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDomStorageEnabled(true);<br>

拿Android类比的话，Web的Dom Storage机制类似于Android的SharedPreference机制。

本文文字及图片出自 CSDN