time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5 Web存储教程】2、使用localStorage方式进行编写一个Web页面示例

【HTML5 Web存储教程】2、使用localStorage方式进行编写一个Web页面示例

时间:2012-12-09 11:07 点击:1335次 字体:[ ]




功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图:

【HTML5 Web存储教程】2、使用localStorage方式进行编写一个Web页面示例_www.fengfly.com

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     <title></title> 
  6.     <style type="text/css"> 
  7.         textarea {  
  8.             width: 500px;  
  9.             height: 200px;  
  10.         }  
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div> 
  15.         <h2>简单的web存储留言板</h2> 
  16.         <textarea id="t1"></textarea> 
  17.         <br /> 
  18.         <input type="button" class="button" onclick="addInfo()" value="留言" /> 
  19.         <input type="button" class="button" onclick="cleanInfo()" value="清除留言" /> 
  20.         <br /> 
  21.         <hr /> 
  22.         <label id="shows"></label> 
  23.         <textarea id="show" readonly="readonly"></textarea> 
  24.     </div> 
  25.     <script type="text/javascript"> 
  26.         //使用HTML5 Web存储的localStorage方式进行编写一个Web页面。  
  27.         //功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图:  
  28.  
  29.         function upInfo() {  
  30.             var lStorage = window.localStorage;  
  31.             var show = window.document.getElementById("show");  
  32.             if (window.localStorage.myBoard) {  
  33.                 show.value = window.localStorage.myBoard;  
  34.             }  
  35.             else {  
  36.                 var info = "还没有留言";  
  37.                 show.value = "还没有留言";  
  38.             }  
  39.         }  
  40.  
  41.         function addInfo() {  
  42.             var info = window.document.getElementById("t1");  
  43.             var lStorage = window.localStorage;  
  44.             if (lStorage.myBoard) {  
  45.                 var date = new Date();  
  46.                 lStorage.myBoard += t1.value + "\n发表时间:" + date.toLocaleString() + "\n";  
  47.             }  
  48.             else {  
  49.                 var date = new Date();  
  50.                 lStorage.myBoard = t1.value + "\n发表时间:" + date.toLocaleString() + "\n";  
  51.             }  
  52.  
  53.             upInfo();  
  54.         }  
  55.         function cleanInfo() {  
  56.             window.localStorage.removeItem("myBoard");  
  57.             upInfo();  
  58.         }  
  59.         upInfo();  
  60.     </script> 
  61.  
  62. </body> 
  63. </html> 

 



本文地址 : http://www.fengfly.com/plus/view-210800-1.html
标签: HTML5 localStorage
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: