1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="gb2312"> 5 <title>HTML5--JS API-本地存储 Web留言板</title> 6 <style type="text/css"> 7 *{margin:0; padding:0;} 8 body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;} 9 h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:#0051a1;} 10 #content #post,#comment p{zoom:1;} 11 #content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';} 12 .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;} 13 #content{margin:0 auto; width:960px; overflow:hidden;} 14 #content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;} 15 #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;} 16 #content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;} 17 #content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;} 18 #comment{overflow:hidden;} 19 #comment p{margin-bottom:10px; padding:10px; border-radius:5px;} 20 #comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;} 21 #comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;} 22 #comment p span{display:inline; float:left;} 23 #comment p .msg{width:738px;} 24 #comment p .datetime{width:200px; color:#999; text-align:right;} 25 </style> 26 <script type="text/javascript"> 27 var Storage = 28 { 29 saveData:function()//保存数据 30 { 31 var data = document.querySelector("#post textarea"); 32 if(data.value != "") 33 { 34 var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数 35 localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率 36 data.value = ""; 37 this.writeData(); 38 } 39 else 40 { 41 alert("请填写您的留言！"); 42 } 43 }, 44 writeData:function()//输出数据 45 { 46 var dataHtml = "", data = ""; 47 for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法 48 { 49 data = localStorage.getItem(localStorage.key(i)).split("|"); 50 dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>"; 51 } 52 document.getElementById("comment").innerHTML = dataHtml; 53 }, 54 clearData:function()//清空数据 55 { 56 if(localStorage.length > 0) 57 { 58 if(window.confirm("清空后不可恢复，是否确认清空？")) 59 { 60 localStorage.clear(); 61 this.writeData(); 62 } 63 } 64 else 65 { 66 alert("没有需要清空的数据！"); 67 } 68 }, 69 getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58 70 { 71 var isZero = function(num)//私有方法，自动补零 72 { 73 if(num < 10) 74 { 75 num = "0" + num; 76 } 77 return num; 78 } 79 80 var d = new Date(); 81 return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds()); 82 } 83 } 84 85 window.onload = function() 86 { 87 Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空 88 document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出 89 document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据 90 } 91 </script> 92 </head> 93 94 <body> 95 <h1>HTML5--JS API-本地存储 Web留言板</h1> 96 <div id="content"> 97 <div id="post"> 98 <textarea class="transition"></textarea> 99 <input id="postBt" type="button" value="发表评论"/> 100 <input id="clearBt" type="button" value="清空所有已保存的数据"/> 101 </div> 102 <div id="comment"></div> 103 </div> 104 </body> 105 </html>