一.Web Storage

在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能，我们知道，在HTML4中可以使用cookies在客户端保存用户名灯简单的用户信息，但是，通过长期的实际使用下来，发现使用cookies存储数据存在弊端：

大小：cookies的大小被限制在4KB。
带宽：cookies是随HTTP事务一起被发送的，因此会浪费发送cookies的带宽。
复杂性：要正确的操纵cookies是很困难。

在这种情况下HTML5提供了一种在客户端本地保存数据的功能，他就是Web Storage功能。

Web Storage功能，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的，Web Storage分为两种。

sessionStorage

将数据保存在session对象中。所谓的session，是指用户在浏览某个网站时，从进入网站到浏览器关闭期间，session对象可以保存在这段时间内要求保存的任何数据。

localStorage

将数据保存在客户端本地的硬件设备(硬盘等)，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站仍然可以继续使用。

两者区别在于，sessionStorage为临时保存，而localStorage为永久保存。

二.使用sessionStorage或localStorage保存并读取数据

保存数据的方法很简单，只需调用setItem(key,value)方法即可，具体调用格式如下：

sessionStorage.setItem(key,value);
localStorage.setItem(key,value);

参数key表示被保存内容的键名
参数value表示保存内容的键值，在使用setItem()方法保存数据时，对应格式为‘键名，键值’。成功设置键名后不允许修改，重复。

读取被保存的数据，只需调用getItem(key)方法即可

sessionStorage.getItem(key);
localStorage.getItem(key);

示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
//sessionStorage 会话保存
/*function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
}

function loadStorage(id) {
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	target.innerHTML = msg;
}*/

//localStorage 会话保存
function saveStorage(id) {
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
}

function loadStorage(id) {
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	target.innerHTML = msg;
}
</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');"/>
<br/>

</body>
</html>

三.使用本地数据库保存数据

上面介绍了Web Storage存储本地的方法，虽然这种存储方法比较简单，但Web Storage存储空间只有5MB。为此Web SQL数据库(Web DB)，他内置SQLite数据库，对数据库操作可以通过executeSql()来实现，允许使用javaScript代码控制数据库的操作。

Web DB可以实现数据的本地存储，他提供了关系数据库的基本功能，可以存储页面中交互的，复制的数据。即可以保存数据，也可以缓存从服务器获取的数据。Web DB通过事务驱动实现对数据的管理，支持多浏览器并发操作，而不发生存储冲突。

常用API如下：

打开或创建数据库

openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback());

参数DBName：表示数据库名称
参数DBVersion：表示版本号
参数DBSize：表示数据库的大小，单位为字节，如果是2MB，必须写成2*1024*1024；
参数Callback()：表示创建或打开数据成功后执行一个函数；

HTML5之Web Storage本地存储

一.Web Storage

二.使用sessionStorage或localStorage保存并读取数据

三.使用本地数据库保存数据

相关推荐