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机制。

余下全文(1/3)

本文最初发表在CSDN,文章内容属作者个人观点,不代表本站立场。

分享这篇文章:

请关注我们:

发表评论

邮箱地址不会被公开。 必填项已用*标注