HTML5之Web Storage本地存储
一.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()：表示创建或打开数据成功后执行一个函数；
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...