logo

DOM 存储(DOM Storage)简介
作者:孟宪会 发表于:2008-11-25 21:17:08

DOM 存储 API提供了一种以安全的方式在客户端永久保存数据的方法:sessionStorage 和 localStorage。这些对象是HTML 5规范的一部分,在Internet Explorer 8初次引入,Firefox 2.0也支持此对象。以前的IE版本,要在客户端保存数据,有两种方法,Cookie和userData行为。DOM 存储为浏览器离线工作打下了基础。

DOM 存储与HTTP Cookie一样,网页开发人员可以使用DOM存储以名称/值对的方式存储每个回话或者指定域的数据。但DOM存储与 Cookie有很大的区别,它更容易控制信息的存储。Cookie存储的数据是很受限制的,比如在IE中,只能存储4KB大小的数据,最大20个名称/对,而 DOM 存储可以为每个存储区域提供大到10M 的存储空间。从功能上讲,客户端的存储区域与Cookie也非常不一样,DOM存储在每次请求时不会将值发送到服务器,本地存储存储的数据也永远不会过期,并且以一种标准的接口轻松访问每个信息。

window.sessionStorage

Session 存储用在用户执行单个事务的情形。window的sessionStorage属性维护着在单个标签的生命周期内所加载的全部页面的名称/对信息。比如,在订票时有一个复选框供用户选择是否需要保险:

<label><input type="checkbox" onchange="sessionStorage.insurance = checked">我需要保险</label>

后面的页面就可以通过脚本进行检测用户是否选择了保险

if (sessionStorage.insurance) { ... }

Storage 对象支持伪属性,名称/值对存储的必须是字符串,其他类型的数据都必须转成字符串保存。

一旦一个值保存到到了sessionStorage里面,它就可以在同一上下文的其他页面得到,当页面加载时,sessionStorage会从内存中进行初始化。注意:IE8在浏览器崩溃恢复后sessionStorage将不再可用。

window.localStorage

localStorage 属性提供domain范围的永久存储,允许存储10M的用户数据,例如,下面是用户访问一个页面的次数的记录:

<p>访问次数:<span id="count">未知</span></p> <script> var storage = localStorage[location.hostname]; if (!storage.pageLoadCount) storage.pageLoadCount = 0; storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1; document.getElementById('count').innerHTML = storage.pageLoadCount; </script>

每个域名和子域名有他们自己独立的本地存储区域。主域可以访问子域的存储区域,子域也可以访问父域的存储区域。例如:主域的localStorage["aspx.cc"]可以被aspx.cc及其子域访问,子域的localStorage["www.aspx.cc"]可以被aspx.cc访问,但不能被其他子域访问,如dotnet.aspx.cc。

相关文章:

  1. Firefox 中的DOM 存储
    https://developer.mozilla.org/en/DOM/Storage
    https://developer.mozilla.org/cn/DOM/Storage
  2. Flash中的本地存储 http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html
  3. Silverlight中的本地存储 http://msdn.microsoft.com/en-us/library/system.io.isolatedstorage%28VS.95%29.aspx