在html5中与本地存储相关的两个相关内容：Web Storage 与本地数据库
web Storage存储机制是对html4中的cookie存储机制的一个改善。web Storage就是在web上存储数据的功能（针对客户端本地），使用它可以再客户端本地建立一个数据库，这样可以存储页面内容在本地，还加快了访问数据的速度。
web Storage分两种：sessionStorage 与 localStorage
一、sessionStorage
sessionStorage为临时保存，将数据存在session对象中，当浏览器关闭，保存的内容也就消失。
二、localStorage
localStorage为永久保存，将数据保存在客户端本地的硬件设备（硬盘），即使浏览器关闭了，数据任然存在，下次打开该浏览器访问网站时任然可以继续使用
两种方法的保存数据与读取数据的示例，请狠狠的点击这里
使用localStorage方法来制作简单的web留言本，查看效果请狠狠的点击这里
代码展示
<script type="text/javascript">
function saveStorage(id) {
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time, data);
alert("数据已保存。");
loadStorage('msg');
} function loadStorage(id) {
var result = '<table border="1">';
for(var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
var datestr = date.toGMTString();
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
}
result += '</table>';
var target = document.getElementById(id);
target.innerHTML = result;
} function clearStorage() {
localStorage.clear();
alert("全部数据被清除。");
loadStorage('msg');
}
</script> <h1>简单Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br>
<input type="button" value="追加" onclick="saveStorage('memo');">
<input type="button" value="初始化" onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
使用localStorage方法来制作简易数据库，查看效果请狠狠点击这里
代码展示
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2"); btn1.onclick = function(){
saveStorage()
}
btn2.onclick = function(){
findStorage('msg')
}
} function saveStorage(){
var data = new Object;
data.name = document.getElementById('name').value;
data.email = document.getElementById("email").value;
data.tel = document.getElementById("tel").value;
data.memo = document.getElementById("memo").value;
var str = JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("数据以保存")
}
function findStorage(id){
var find = document.getElementById("find").value;
var str = localStorage.getItem(find);
var data = JSON.parse(str);
var resule = "姓名:"+ data.name + '<br>';
resule += "emial:" + data.email+'<br>';
resule += "电话:" + data.tel +'<br>';
resule += "备注:"+ data.memo;
var target = document.getElementById(id);
target.innerHTML = resule;
}
</script> <table border="" cellspacing="" cellpadding="">
<tr>
<td>姓名</td>
<td><input type="text" name="" id="name" value="" /></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" name="" id="email" value="" /></td>
</tr>
<tr>
<td>电话号码</td>
<td><input type="text" name="" id="tel" value="" /></td>
</tr>
<tr>
<td>备注</td>
<td><input type="text" name="" id="memo" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" id="btn1" value="保存" /></td>
</tr>
</table>
<br /><br />
<p>
检索名字<input type="text" name="find" id="find" value="" />
</p>
<input type="button" name="btn2" id="btn2" value="检索" />
<div id="msg"></div>