文档介绍：shu2c@
第8章本地存储
本章介绍HTML 5中与本地存储相关的两个策要内容——Web Storage与本地数据库
Web Storage存储机制是对HTML 4中cookies存储机制的一个改善
HTML 5中不再使用cookies,转而使用改良后的Web Storage存储机制
本地数据库是HTML 5中新增的一个功能
cookies储存永久数据存在以下几个问题: '
□大小:cookies的大小被限制在4KB。 .,
□带宽:cookies是随HTTP事务一起被发送的,因此会浪费一部分发送cookies时使用的带宽。
□复杂性:要正确地操纵cookies是很困难的。
在这种情况下,在HTML 5中重新提供了一种在客户端本地保存数据的功能,它就是 Web Storage功能。
Web Storage功能,顾名思义,就是在Web上储存数据的功能,而这里的储存,是针对客户端本地而言的
Web Storage
Web Storage又分为两种:
sessionStorage
将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage
将数据保存在客户端本地的硬件设备(通常指硬盘,但也可以是其他硬件设备)中,即
使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Web Storage示例</title>
<script type="text/javascript" src=""></script>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('msg');">
</body>
</html>
代码清单8-1
但是两种方法对数据的处理方式不一样,使用sessionStorage方法时,如果关闭了浏览器, 这个数据就丢失了,下一次打开浏览器,点击读取数据按钮时,读取不到任何数据。
使用localStorage方法时,即使浏览器关闭了,下次打开浏览器时仍然能够读取被保存的数据。但是,数据保存是按不同的浏览器分别进行的,也就是说,如果打开别的浏览器,是读取不到在这个浏览器中保存的数据的
我们来看一下读取数据部分。下面是读写数据时使用的基本方法。
sessionStorage
保存数据: (key,value)
读取数据:变量=(key)
localStorage
保存数据: (key,value),
读取数据:变量=(key)
保存时不允许重复保存相同的键名。保存后可以修改键值,伹不允许修改键名(只能重新取键名,然后再保存键值)。
-2所示
//sessionStorage示例
function saveStorage(id)
{
var target = (id);
var str = ;
("message",str);
//=str;
}
function loadStorage(id)
{
var target = (id);
var msg = ("message");
//或var msg=;
= msg;
}
//localStorage示例
function saveStorage(id)
{
var target = (id);
var st