<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>HTML5--JS API-本地存储 Web留言板</title>
<style type="text/css">
*{margin:0; padding:0;}
body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}
h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:#0051a1;}
#content #post,#comment p{zoom:1;}
#content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
.transition{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
#content{margin:0 auto; width:960px; overflow:hidden;}
#content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;}
#content #post textarea{display:block; margin-bottom:10px; padding:5px; width:948px; height:390px;
border:1px #d1d1d1 solid; border-radius:5px; resize:none; outline:none;}
#content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}
#content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}
#comment{overflow:hidden;}
#comment p{margin-bottom:10px; padding:10px; border-radius:5px;}
#comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
#comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
#comment p span{display:inline; float:left;}
#comment p .msg{width:738px;}
#comment p .datetime{width:200px; color:#999; text-align:right;}
</style>
<script type="text/javascript">
var
Storage =
{
saveData:
function
()
{
var
data = document.querySelector("#post textarea");
if
(data.value != "")
{
var
time =
new
Date
().getTime() + Math.random() * 5;
localStorage.setItem(time, data.value + "|" + this.getDateTime());
data.value = "";
this.writeData();
}
else
{
alert("请填写您的留言!");
}
},
writeData:
function
()
{
var
dataHtml = "", data = "";
for
(
var
i = localStorage.length-1; i >= 0; i--)
{
data = localStorage.getItem(localStorage.key(i)).split("|");
dataHtml += "<p><span
class
=\"msg\">" + data[0] + "</span><span
class
=\"datetime\">" + data[1] + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
},
clearData:
function
()
{
if
(localStorage.length > 0)
{
if
(window.confirm("清空后不可恢复,是否确认清空?"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("没有需要清空的数据!");
}
},
getDateTime:
function
()
{
var
isZero =
function
(num)
{
if
(num < 10)
{
num = "0" + num;
}
return
num;
}
var
d =
new
Date
();
return
d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.
getDate
()) + "
" + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
}
}
window.onload =
function
()
{
Storage.writeData();
document.getElementById("postBt").onclick =
function
(){Storage.saveData();}
document.getElementById("clearBt").onclick =
function
(){Storage.clearData();}
}
</script>
</head>
<body>
<h1>HTML5--JS API-本地存储 Web留言板</h1>
<div id="content">
<div id="post">
<textarea
class
="transition"></textarea>
<input id="postBt" type="button" value="发表评论"/>
<input id="clearBt" type="button" value="清空所有已保存的数据"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>