<!DOCTYPE HTML>
<html>
???? <head>
???????? <meta charset="utf-8">
???????? <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;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
???????????????????? 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></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)//私有方法
html5 本土存储 留言板
日期：2014-05-17 浏览次数：20746 次
html5 本地存储 留言板
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
