转载

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

Dom Storage存储机制

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

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

Dom Storage是通过存储字符串的Key/Value对来提供的，并提供5MB（不同浏览器可能不同，分Host）的存储空间（Cookies才4KB)。另外DomStorage存储的数据在本地，不像 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，再重新打开，上一次输入保存的内容已经没有了。

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

Local Storage的接口、用法与Session Storage一样，唯一不同的是：Local Storage保存的数据是持久性的。当前Page关闭（PageSession结束后），保存的数据依然存在。重新打开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。这是因为第一次的值已经保存了。

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

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

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

分析：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机制。

正文到此结束