HTML5 localStorage使用演示代码实例---------评论

最新推荐文章于 2023-08-09 19:45:10 发布
Return_KB
最新推荐文章于 2023-08-09 19:45:10 发布
阅读量540
点赞数
分类专栏：前端js
前端js 专栏收录该内容
39 篇文章 0 订阅
订阅专栏
分享一段代码实例，它利用localStorage实现了本地留言板功能。
代码实例如下:
     
     
      
      
       
       
        
         
            
              001 
             
            
              002 
             
            
              003 
             
            
              004 
             
            
              005 
             
            
              006 
             
            
              007 
             
            
              008 
             
            
              009 
             
            
              010 
             
            
              011 
             
            
              012 
             
            
              013 
             
            
              014 
             
            
              015 
             
            
              016 
             
            
              017 
             
            
              018 
             
            
              019 
             
            
              020 
             
            
              021 
             
            
              022 
             
            
              023 
             
            
              024 
             
            
              025 
             
            
              026 
             
            
              027 
             
            
              028 
             
            
              029 
             
            
              030 
             
            
              031 
             
            
              032 
             
            
              033 
             
            
              034 
             
            
              035 
             
            
              036 
             
            
              037 
             
            
              038 
             
            
              039 
             
            
              040 
             
            
              041 
             
            
              042 
             
            
              043 
             
            
              044 
             
            
              045 
             
            
              046 
             
            
              047 
             
            
              048 
             
            
              049 
             
            
              050 
             
            
              051 
             
            
              052 
             
            
              053 
             
            
              054 
             
            
              055 
             
            
              056 
             
            
              057 
             
            
              058 
             
            
              059 
             
            
              060 
             
            
              061 
             
            
              062 
             
            
              063 
             
            
              064 
             
            
              065 
             
            
              066 
             
            
              067 
             
            
              068 
             
            
              069 
             
            
              070 
             
            
              071 
             
            
              072 
             
            
              073 
             
            
              074 
             
            
              075 
             
            
              076 
             
            
              077 
             
            
              078 
             
            
              079 
             
            
              080 
             
            
              081 
             
            
              082 
             
            
              083 
             
            
              084 
             
            
              085 
             
            
              086 
             
            
              087 
             
            
              088 
             
            
              089 
             
            
              090 
             
            
              091 
             
            
              092 
             
            
              093 
             
            
              094 
             
            
              095 
             
            
              096 
             
            
              097 
             
            
              098 
             
            
              099 
             
            
              100 
             
            
              101 
             
            
              102 
             
            
              103 
             
            
              104 
             
            
              105 
             
            
              106 
             
            
              107 
             
            
              108 
             
            
              109 
             
            
              110 
             
            
              111 
             
            
              112 
             
             
              
              <!doctype html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              title 
              >评论</ 
              title 
              > 
              
              
              < 
              style 
              > 
              
              
              ol li { 
              
              
                 
              list-style: none; 
              
              
              } 
              
              
              .show { 
              
              
                 
              border: 1px solid #CCC; 
              
              
                 
              width: 580px; 
              
              
                 
              height: 1000px; 
              
              
              } 
              
              
              #ms li { 
              
              
                 
              border: 1px solid #CCC; 
              
              
                 
              width: 450px; 
              
              
                 
              height: 100px; 
              
              
                 
              margin-bottom: 10px; 
              
              
                 
              margin-left: 20px; 
              
              
              } 
              
              
              #time { 
              
              
                 
              position: relative; 
              
              
                 
              top: 50px; 
              
              
                 
              left: 200px; 
              
              
                 
              font-size: 15px; 
              
              
              } 
              
              
              .zx { 
              
              
                 
              border-bottom: 1px solid #DBDBDB; 
              
              
                 
              padding-bottom: 10px; 
              
              
                 
              margin-left: 10px; 
              
              
                 
              padding-left: 20px; 
              
              
                 
              width: 540px; 
              
              
              } 
              
              
              .bt { 
              
              
                 
              position: relative; 
              
              
                 
              left: 430px; 
              
              
                 
              margin-bottom: 30px; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script  
              type 
              = 
              "text/javascript" 
              > 
              
              
              window.onload = function() { 
              
              
                 
              var oul = document.getElementById('ms'); 
              
              
                 
              loadStorage("msg"); 
              
              
                 
              reversed(); 
              
              
                 
              
              
                 
              function saveStorage(id) { 
              
              
                   
              var data = document.getElementById(id).value; 
              
              
                   
              var time = new Date().getTime(); //.toLocaleString(); 
              
              
                   
              localStorage.setItem(time, data); 
              
              
                   
              alert("已评论"); 
              
              
                   
              loadStorage('msg'); 
              
              
                 
              } 
              
              
                 
              
              
                 
              function loadStorage(id) { 
              
              
                   
              var result = '< 
              ol  
              id 
              = 
              "ms" 
              >'; 
              
              
                   
              var onum = document.getElementById("num"); 
              
              
                   
              onum.innerHTML = localStorage.length; 
              
              
                   
              for (var i = 0; i < localStorage.length; i++) { 
              
              
                     
              var key = localStorage.key(i); 
              
              
                     
              var values = localStorage.getItem(key); 
              
              
                     
              var date = new Date(); 
              
              
                     
              date.setTime(key); 
              
              
                     
              var datestr = date.toLocaleString(); 
              
              
                     
              result += '< 
              li 
              >' + values + '< 
              br 
              />< 
              span  
              id 
              = 
              "time" 
              >发表于 ' + datestr + '</ 
              span 
              ></ 
              li 
              >'; 
              
              
                   
              } 
              
              
                   
              result += '</ 
              ol 
              >< 
              br 
              />'; 
              
              
                   
              var target = document.getElementById(id); 
              
              
                   
              target.innerHTML = result; 
              
              
                 
              } 
              
              
                 
              
              
                 
              function clearStorage() { 
              
              
                   
              localStorage.clear(); 
              
              
                   
              loadStorage("msg"); 
              
              
                 
              } 
              
              
                 
              var obtn = document.getElementById('btn'); 
              
              
                 
              obtn.onclick = function() { 
              
              
                   
              saveStorage("memo"); 
              
              
                   
              reversed(); 
              
              
                 
              } 
              
              
                 
              
              
                 
              function reversed() { 
              
              
                   
              var obj = document.getElementById("ms"); 
              
              
                   
              var lis = obj.getElementsByTagName("li"); 
              
              
                   
              for (var i = lis.length - 1; i > -1; i--) { 
              
              
                     
              obj.appendChild(lis[i]); 
              
              
                   
              } 
              
              
                 
              } 
              
              
                 
              var ops = document.getElementById('pass'); 
              
              
                 
              ops.onclick = function() { 
              
              
                   
              alert("确定删除"); 
              
              
                   
              clearStorage('msg'); 
              
              
                 
              } 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
                 
              < 
              div 
              > 
              
              
                   
              < 
              h4 
              >< 
              b 
              >评论区：</ 
              b 
              ></ 
              h4 
              > 
              
              
                   
              < 
              textarea  
              id 
              = 
              "memo"  
              cols 
              = 
              "80"  
              rows 
              = 
              "7" 
              ></ 
              textarea 
              >< 
              br  
              /> 
              
              
                   
              < 
              div  
              class 
              = 
              "bt" 
              > 
              
              
                     
              < 
              input  
              type 
              = 
              "button"  
              id 
              = 
              "btn"  
              value 
              = 
              "评论" 
              > 
              
              
                     
              < 
              input  
              type 
              = 
              "button"  
              id 
              = 
              "pass"  
              value 
              = 
              "删除所有评论" 
              > 
              
              
                   
              </ 
              div 
              > 
              
              
                 
              </ 
              div 
              > 
              
              
                 
              < 
              div  
              class 
              = 
              "show" 
              > 
              
              
                   
              < 
              h4  
              class 
              = 
              "zx" 
              >< 
              b 
              >最新评论(共< 
              span  
              id 
              = 
              "num"  
              style 
              = 
              "color:#C03" 
              >0</ 
              span 
              >条评论)：</ 
              b 
              ></ 
              h4 
              > 
              
              
                   
              < 
              div  
              id 
              = 
              "msg" 
              ></ 
              div 
              > 
              
              
                 
              </ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >
Return_KB
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 localStorage使用演示代码实例---------评论

分享一段代码实例，它利用localStorage实现了本地留言板功能。代码实例如下:0010020030040050060070080090100110120130140150160170180190200210220230240250260270280290300310320330340350360370380390400410420430440450460470480490500510
复制链接

扫一扫