這次留言板運用到了最基礎的localstorage的本地存儲，展現的效果主要有：
1.編寫留言
2.留言前可以編輯自己的留言昵稱。
不足之處:
1.未能做出我喜歡的類似於網易的疊樓功能。
2.未能顯示評論樓層(可實現，但是插進去十分不美觀)。
編輯效果如下：
文件為html文件，編寫的方式主要為div+css布局和js。本人的有點在於編寫類似於后台功能和js的實現較快。但是缺點在於前端的編寫較為薄弱。
在學長的幫助下前端的設計還是比較美觀的。下面我將開放記事本的全部源碼。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>記事本</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:black;}
#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;
height: 556px;
}
#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 .right{text-align:right;}
#comment p .msg{width:738px;}
#comment p .datetime{width:200px; color:#999; text-align:right;}
</style>
<script type="text/javascript">
var named;
function delete1(id)
{
localStorage.removeItem(id);
this.Storage.writeData();
}
function prom() {
var name = prompt("請輸入您的名字", "");//將輸入的內容賦給變量 name ，
named = name;
//這里需要注意的是，prompt有兩個參數，前面是提示的話，后面是當對話框出來后，在對話框里的默認值
if (named)//如果返回的有內容
{
alert("歡迎您：" + name)
document.getElementById("shangtian").style.display = "none";
document.getElementById("ritian").value = named;
}
else {
document.getElementById("ritian").value = "匿名發言者";
}
}
var Storage =
{
saveData:function()//保存數據
{
var data = document.querySelector("#post textarea");
if(data.value != "")
{
var time = new Date().getTime() + Math.random() * 5;//getTime是Date對象中的方法，作用是返回 1970年01月01日至今的毫秒數
if (named) {
localStorage.setItem(time, data.value + "|" + named + "|" + this.getDateTime());//將毫秒數存入Key值中，可以降低Key值重復率
}
else
{
localStorage.setItem(time, data.value + "|" + "匿名發言者" + "|" + this.getDateTime());//將毫秒數存入Key值中，可以降低Key值重復率
}
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><span>" + data[2]+"</span></p>";
dataHtml += "<span style=>" + data[1] + "<span style=\"float:right\">" + data[2] + "</span><p><span class=\"msg\">" + data[0] + "<input style=\"float:right;border:none;border-radius:5px;\" id=\"clearBt\" type=\"button\" onclick=\"delete1(" + localStorage.key(i) + ");\" value=\"刪除\"/>" + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
},
clearData:function()//清空數據
{
if(localStorage.length > 0)
{
if(window.confirm("清空后不可恢復，是否確認清空？"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("沒有需要清空的數據！");
}
},
getDateTime:function()//獲取日期時間，例如 2012-03-08 12:58:58
{
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();//當打開頁面的時候，先將localStorage中的數據輸出一邊，如果沒有數據，則輸出空
document.getElementById("postBt").onclick = function(){Storage.saveData();}//發表評論按鈕添加點擊事件，作用是將localStorage中的數據輸出
document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的數據
}
</script>
</head>
<body>
<h1>留言板</h1>
<div id="content">
<div id="post">
<div style="background:#3EADC5 ;height:30px;">
昵稱：<input type="submit" id="shangtian" name="Submit3" style="border:none; background-color:#3EADC5; color:white;" value="默認用戶點擊改變" onclick="prom()" />
<input type="text" id="ritian" style="border:none; background-color:#3EADC5; color:white;" onclick="prom()"/>
<!--disabled="disabled"-->
</div>
<div>
<textarea class="transition"></textarea>
</div>
<input id="postBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="發表留言"/>
<input id="clearBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="清空"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>