Js 基于html5-localStorage方法 制作的 "我的便签本"

 

我的便签

1.用localStorage存储数据 比cookie存储空间大 缺点就是基于支持html5的浏览器
2.操作就是对localStorage数据的提取/展示/修改/保存
3.这个实例更多的是对数组的操作
4.chrome和firefox是可以本地预览的 ie8 9需要启动本地服务http://localhost/才支持window.localStorage

 下载地址:https://files.cnblogs.com/dtdxrk/html5-localStorage.rar

  1 <!DOCTYPE html>
  2  <html>
  3  <head>
  4      <title>我的便签</title>
  5      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6      <style type="text/css">
  7      *{margin:0;padding: 0; list-style: none;}
  8      body{ font:12px '微软雅黑', arial, \5b8b\4f53, sans-serif;background: #efefef;line-height: 1.5}
  9      #text{background: green;color: #fff;padding-bottom: 10px;font-family: "arial";}
 10  
 11      #notepad{width: 400px;margin: 50px auto;border: 1px solid #ccc;position: relative;background-color: #666;overflow: hidden;}
 12      #notepad h1{line-height: 35px;background-color:#582900;font-weight: normal; color: #fff;font-size: 18px;padding: 0 20px;overflow:hidden;}
 13      #notepad h1 span{float: right;cursor: pointer;}
 14      #notepad input{vertical-align: -3px;margin-right: 5px;}
 15  
 16      #content{display:none;z-index: 100;color:#fff;position: absolute;width: 400px;height: 400px;left:0;top:0;background-color: #666;}
 17      #content h1 a{color: #fff;cursor: pointer;}
 18      #content h1 a:hover{color: #fff;}
 19      #content #textarea{padding: 5px;border:0;overflow-x: hidden;overflow-y: hidden;height:355px;width:390px;font-size: 14px;line-height: 1.5;color: #333;}
 20      #content #save{float: right;margin-right: 10px;}
 21  
 22      #notepad #list{overflow: hidden;margin:15px;height:330px;overflow-x: hidden;overflow-y: auto;z-index: 99;}
 23      #notepad #list li{cursor: pointer;padding:5px 15px;height:20px;background-color:#fff6c1;border-bottom: 1px solid #fea800;}
 24      #notepad #list span{float:right;}
 25      #notepad #list li:hover{background-color:#ffa800;color: #fff;}
 26 
 27      #notepad #editDel{text-align: center;cursor: pointer;background-color: orange;margin: 0 15px 10px;padding: 5px 0;}
 28      </style>
 29  </head>
 30  <body>
 31   <div id="text">
 32       <h1>我的便签</h1>
 33       <p>1.用localStorage存储数据 比cookie存储空间大 缺点就是基于支持html5的浏览器</p>
 34       <p>2.操作就是对localStorage数据的提取/展示/修改/保存</p>
 35       <p>3.这个实例更多的是对数组的操作</p>
 36       <p>4.chrome和firefox是可以本地预览的 ie8 9需要启动本地服务http://localhost/才支持window.localStorage</p>
 37   </div>
 38  
 39  <div id="notepad">
 40      <h1><span id="add">+</span>我的便签</h1>
 41      <ul id="list"></ul>
 42      <div id="editDel">批量管理</div>
 43      <div id="content">
 44          <h1>
 45              <a id="del">×删除</a>
 46              <a id="save">√保存</a>         
 47          </h1>
 48          <textarea id="textarea"></textarea>
 49      </div>
 50     
 51  </div>
 52  
 53  <script type="text/javascript">
 54 
 55 
 56 
 57 function html5LocalStorage(){
 58     var storage = window.localStorage;
 59     storage.getItem("notepad") ? this.arr = storage.getItem("notepad").split(",") : this.arr = [];//this.arr我的便签数据
 60     this.$ = function(id){return document.getElementById(id)};
 61     return this.refresh();
 62 }
 63 
 64 html5LocalStorage.prototype = {
 65     refresh : function(edit){//遍历数组展示数据 1=批量管理状态
 66         var that = this;
 67         that.$("editDel").style.display = "block";
 68         that.$("list").innerHTML ="";
 69         that.$("add").onclick =function(){that.add()};
 70         that.$("editDel").onclick =function(){that.batchManagement()};
 71         for(var i in that.arr){
 72              if(that.arr==0) return;
 73              var create = function(id){return document.createElement(id)},   
 74                  li = create("li"),
 75                  span = create("span"),
 76                  strong = create("strong"),
 77                  title = decodeURIComponent(that.arr[i].split("=")[1]).substring(0,20),   //标题
 78                  time = that.arr[i].split("=")[0];//日期
 79              span.appendChild(document.createTextNode(time));
 80              strong.appendChild(document.createTextNode(title));
 81             if(edit==1){//批量管理
 82                 var checkBox  = create("input");
 83                 checkBox.type = "checkbox";
 84                 checkBox.name = "checkbox";
 85                 checkBox.index = i;
 86                 li.appendChild(checkBox );
 87                 li.onclick = function(){that.check(this.index)};
 88                 checkBox.onclick = function(){that.check(this.index)};
 89              }else{
 90                 li.onclick = function(){that.show(this.index)};
 91              }
 92              li.appendChild(span);
 93              li.appendChild(strong);
 94              li.index = i;
 95 
 96              that.$("list").appendChild(li);   
 97         }
 98     },
 99     batchManagement : function(){
100         var txt = this.$("editDel").innerHTML,
101             checkBoxs = this.$("list").getElementsByTagName("input"),
102             arr = [];
103         if(this.arr.length==0){return alert("啥都没有,您管理啥?")}
104         if(txt=="批量管理"){
105             this.$("editDel").innerHTML = "删除";
106             this.refresh(1);
107         }else{
108             for(var i=0; i<checkBoxs.length; i++){
109                 if(checkBoxs[i].checked){
110                     arr.push(checkBoxs[i].index);
111                 }
112             }
113             this.del(arr)
114         }
115     },
116     check : function(index){
117         var checkBox = this.$("list").getElementsByTagName("input")[index];
118         (checkBox.checked) ? checkBox.checked = false : checkBox.checked = true;
119     },
120     show : function(index){
121         var that = this;
122             text = that.arr[index].split("=")[1]; //标题
123         that.$("editDel").style.display = "none";
124         that.$("content").style.display = "block";
125         that.$("textarea").focus();
126         that.$("textarea").value = decodeURIComponent(text);
127         that.$("save").onclick = function(){that.save(index)};
128         that.$("del").onclick = function(){that.del(index)};
129     },
130     save : function(index){
131         var that = this,
132             txt = that.$("textarea").value,
133             date = new Date(), //取得日期
134             time = (date.getMonth()+1)+""+date.getDate()+"",
135             con = time+"="+encodeURIComponent(txt);
136 
137          if(index != "newStr"){//修改数据   如果内容为空 从arr删除
138             //(txt =="") ? that.arr.splice(index, 1) : that.arr.splice(index, 1, con);  
139             that.arr.splice(index, 1, con);      
140          }else{//第一项插入数据
141             that.arr.unshift(con);
142          }
143 
144          that.editStorage();
145          that.refresh();
146          that.$("content").style.display = "none";
147     },
148     add : function(){
149         var that = this;
150         that.$("editDel").style.display = "none";
151         that.$("textarea").value = "";
152         that.$("content").style.display = "block";
153         that.$("textarea").focus();
154         that.$("save").onclick = function(){that.save("newStr")};
155         that.$("del").onclick = function(){that.del("newStr")};
156     },
157     del : function(index){
158         if(confirm("您确定要删除吗?")){
159              if(index == "newStr"){
160 
161              }else if(typeof index == "object"){//批量删除
162                 var tempArr=[];
163                 for(var a in index){
164                    this.arr.splice(index[a],1,"");//找到下标替换成“空”
165                 }
166                 
167                 for(var b in this.arr){
168                     if(this.arr[b]!="") tempArr.unshift(this.arr[b]);//把不为空的值传到tempArr
169                 } 
170 
171                 this.arr = tempArr;
172              }else{              
173                 this.arr.splice(index, 1);
174              }
175              this.$("editDel").innerHTML = "批量管理";
176              this.editStorage();
177              this.$("content").style.display = "none";
178              this.refresh();
179         }
180     },
181     editStorage : function(){//修改notepad
182         window.localStorage.setItem("notepad", this.arr.toString());
183     }
184 }
185 
186 var hls = new html5LocalStorage();
187  </script>
188  </body>
189  </html>

 

posted @ 2012-10-22 14:42  dtdxrk  阅读(2109)  评论(3编辑  收藏  举报