本篇是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>运行后：
刷新网页数据会累加，但是关掉网页再打开，会发现数据从新开始，并没有记住上次的数据。
代码下载： 地址
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
