HTML5教程之本地存储实例-简单的留言本

sessionStorage和LocalStorage:的键值,我们可以通过getItem(键)来直接获取,还可以直接通过key(索引)来获取键名,在根据键名获取数据,例如localStorage.getItem(localStorage.key(索引)),当然,索引与数组一样,都是从0开始计数。

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>HTML5教程之本地存储实例-简单的留言本</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教程之本地存储实例-简单的留言本</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> 

转载请注明:代码家园 » HTML5教程之本地存储实例-简单的留言本

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)