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><inputtype="checkbox"onchange="sessionStorage.insurance=checked">我需要保险</label>
后面的页面就可以通过脚本进行检测用户是否选择了保险
- if(sessionStorage.insurance){...}
Storage 对象支持伪属性,名称/值对存储的必须是字符串,其他类型的数据都必须转成字符串保存。
一旦一个值保存到到了sessionStorage里面,它就可以在同一上下文的其他页面得到,当页面加载时,sessionStorage会从内存中进行初始化。注意:IE8在浏览器崩溃恢复后sessionStorage将不再可用。
window.localStorage
localStorage 属性提供domain范围的永久存储,允许存储10M的用户数据,例如,下面是用户访问一个页面的次数的记录:
- <p>访问次数:<spanid="count">未知</span></p>
- <script>
- varstorage=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。
相关文章:
Firefox 中的DOM 存储
https://developer.mozilla.org/en/DOM/Storage
https://developer.mozilla.org/cn/DOM/Storage
Flash中的本地存储
http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html
Silverlight中的本地存储
http://msdn.microsoft.com/en-us/library/system.io.isolatedstorage%28VS.95%29.aspx