概念：
关于Web Storage与本地数据库 Web Storage是什么： 在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客服端本地保存数据的Web Storage功能，我们知道在HTML4中可以使用cookies在客服端保存诸如用户名等简单的用户信息，但是通过长期的的实际使用下来，人们发现用cookies储存永久数据存在以下几个问题：
大小：cookies的大小被限制在4kb。
带宽:cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。
复杂性：要正确地操纵cookies是困难的。
在这种情况下，在HTML5中重新提供了一种在客服端本地保存数据的 功能，它就是Web Storage功能。 顾名思义，就是在Web上存储数据的功能，而这里的存储，是针对客服端本地而言的，具体来说，分为两种
sessionStorage
将数据存储在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage
将数据保存在客服端本地的硬件设备中，即使浏览器被关闭了，该数据任然存在，下次打开浏览器访问时仍然可以继续使用。 这两者的区别在于，sessionStorage为临时保存，而后者是
永久保存
应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>媒体播放</title>
</head>
<style>
#video1{
200px;
height: 200px;
}
</style>
<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>
<script type="text/javascript" src="script.js">
</script>
</html>
其中脚本文件script.js的代码如下：
function saveStorage(id)
{
var target = docunment.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
}
function loadStorage(id)
{
var target = docunment.getElementById(id);
var msg = sessionStorage.getItem("message");
target.innerHTML=msg;
}
function saveStorage(id)
{
var target = docunment.getElementById(id);
var str = target.value;
localStorage.setItem("message",str);
}
function saveStorage(id)
{
var target = docunment.getElementById(id);
var msg = localStorage.getItem("message");
target.innerHTML = msg;
}