<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<h2>留言板</h2>
<textarea id="msg" name="msg" cols="50" rows="8"></textarea><br>
<input type="button" value="添加留言" onclick="addMsg();">
<input type="button" value="删除留言" onclick="clearMsg();"><br>
<table style="width:550px;">
<tr>
<th>留言内容</th>
<th>留言时间</th>
</tr>
<tbody id="show"></tbody>
</table>
<script type="text/javascript">
var loadMsg=function(){
var tb=document.getElementById("show");
tb.innerHTML=" ";
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var date=new Date();
var datestr=date.toLocaleDateString()+" "+date.toLocaleTimeString();
//获取留言内容
var value=localStorage.getItem(key);
var row=tb.insertRow(i);
row.insertCell(0).innerHTML=value;
row.insertCell(1).innerHTML=datestr;
}
}
var addMsg=function(){
var msgElement=document.getElementById("msg");
var time=new Date();
var t=time.getTime();
//获取当前时间戳
localStorage.setItem(t,msgElement.value);
msgElement.value="";
loadMsg();
}
var clearMsg=function(){
localStorage.clear();
alert("quanbushanchu");
loadMsg();
}
window.onload=loadMsg();
</script>
</body>
</html>
原文：http://www.cnblogs.com/demoxt/p/6862251.html