本篇是HTML5介绍的第九篇,主要介绍HTML5的网络存储接口(Web Storage API)。
移动Web应用程序开发 HTML5篇 (八) Offline Web Appliactions
1. 介绍
HTML5对数据存储进行了从新设计,在传统的网页中,数据可以存储在Cookies中或者数据库中。Cookies容量太小,数据库又太大。所以HTML5 Web Storage API 应运而生。目前浏览器对齐支持状况如下图:
2. 使用方法
Web Storage API有两种方式,Local Storage 和Session Storage.
Local Storage 存储的数据是永久的,不会因为应用或者浏览器关闭而丢失,而且可以为同一个域下的不同网页所共享,采用明文存储的方式。
Session Storage 存储的数据只在本页面运行的时候有效,而且不能被其他网页所共享。
具体关系见下表
Web Storage API使用键值方式存储数据,其容量大小根据不同浏览器稍有不同,但是要远远大于Cookies。一般大于5MB。Web Storage API同样可以用来存储Jason数据。
Web Storage API的方法很简单,创建和读取一个Local Storage数据代码如下:
localStorage.setItem(‘name’,’Smith’);var name = localStorage.getItem(‘name’);
创建和读取一个Session Storage数据代码如下:
sessionStorage.setItem(‘name’,’Smith’)var name = session.getItem(‘name’);
创建之后,我们可以通过Chrome的Developer Tools来查看数据。在Chrome浏览器中按快捷键F12可以调出Developer Tools。
从下图中我们看出相应的Local Storage 和Session Storage。
2. Web Storage 例子
下面我们通过两个例子来更加详细地了解Web Storage API使用方法.
第一个例子用来展示如何使用Local Storage, 代码如下:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter will continue.</p>
</body>
</html>
运行后会显示:
当关掉网页甚至关掉浏览器之后,再次运行该网页,会发现数据已经存储,而且在上次关掉的基础上进行累加。如下图:
第二个例子展示如何使用Session Storage,代码如下:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
</body>
</html>
运行后:
刷新网页数据会累加,但是关掉网页再打开,会发现数据从新开始,并没有记住上次的数据。
代码下载: 地址