localStorage本地存储数组、读取、修改、删除

最新推荐文章于 2022-09-03 13:59:34 发布

Linux????? Mr.Liyz

最新推荐文章于 2022-09-03 13:59:34 发布

阅读量1.8k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengjw/p/6945968.html

版权

应用场景：用于记录扫码枪获取的编码数据，并存储在本地、计数。可修改，可导出excel。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Scanning</title>
  6 <style>
  7 input{width:600px;height:38px;line-height: 38px;font-size: 32px;border:1px solid #ccc;outline: none;}
  8 table{font-size: 14px;margin:20px 0;}
  9 table,table tr,table tr td{border-collapse: collapse;border-spacing: 0;border:1px solid #ccc;}
 10 td{padding:5px;}
 11 .operation{ text-align: center;}
 12 .operation button{ margin: 0 5px;}
 13 #export{ width: 604px; display: block; line-height: 30px; margin-bottom: 30px;}
 14 </style>
 15 </head>
 16 <body>
 17 
 18 <input type="textbox" id="coding" maxlength="24" />
 19 <table id="table-main">
 20     <tr id="num-data">
 21         <td width="220">编号</td>
 22         <td width="100">尺码</td>
 23         <td width="100">数量</td>
 24         <td width="139">操作</td>
 25     </tr>
 26 </table>
 27 <button id="export">导出数据</button>
 28 <button id="clear">清除</button>
 29 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 30 <script>
 31     
 32 document.onkeydown=function(event){
 33     var e = event || window.event || arguments.callee.caller.arguments[0];
 34     if(e && e.keyCode==13){    
 35         var _code=$("#coding").val();
 36         if(_code){
 37             var _size=_code.substr(-3);
 38             var _index=$.inArray(_code,local.code);
 39             if(_index=='-1'){
 40                 var _num=1;
 41                 local.data(_code,_num);
 42                 local.addtd(_code,_size,_num);
 43             }else{
 44                 var _num=Number(local.num[_index])+1;
 45                 local.data(_index,_num,'modify');
 46                 $('.code').each(function(){
 47                     if($(this).text()==_code){
 48                         $(this).siblings('.num').text(_num);
 49                         return;
 50                     }
 51                 });
 52             }
 53         }else{
 54             alert('编码错误！');
 55         }
 56         $('#coding').val('').focus();
 57     }else{
 58         $('#coding').focus();
 59     }
 60 }; 
 61 
 62 var local={
 63     //存储的数组
 64     code:[],
 65     num:[],
 66     //存储方法
 67     data:function(code,num,modify){
 68         if(localStorage.code&&localStorage.num){
 69             local.code=local.read('code');
 70             local.num=local.read('num');
 71         }
 72         if(modify=='modify'){
 73             local.num[code]=num;
 74             localStorage.num=local.num;
 75         }else{
 76             local.code.push(code);
 77             local.num.push(num);
 78             localStorage.code=local.code;
 79             localStorage.num=local.num;
 80         }
 81     },
 82     //读取数组方法
 83     read:function(type){
 84         if(localStorage.code&&localStorage.num){
 85             if(type=='code'){
 86                 var str=localStorage.code;
 87                 return str.split(",");
 88             }else{
 89                 var str=localStorage.num;
 90                 return str.split(",");
 91             }
 92         }else{
 93             return false;
 94         }
 95     },
 96     //清除方法
 97     remove:function(){
 98         localStorage.clear();
 99         local.code=[];
100         local.num=[];
101         history.go(0);
102     },
103     //添加数据元素
104     addtd:function(code,size,num){
105         $('#num-data').after(
106             "<tr>"+
107                 "<td class='code'>"+code+"</td>"+
108                 "<td class='size'>"+size+"</td>"+
109                 "<td class='num'>"+num+"</td>"+
110                 "<td class='operation'><button class='mod'>修改</button><button class='del'>删除</button></td>"+
111             "</tr>"
112         );
113     },
114     //初始化
115     innt:function(){
116         $("#coding").focus();
117         var code=local.read('code');
118         var num=local.read('num');
119         if(code){
120             local.code=local.read('code');
121             local.num=local.read('num');
122             for(var i=0;i<code.length;i++){
123                 var size=code[i].substr(-3);
124                 local.addtd(code[i],size,num[i]);
125             }
126         }
127     }
128 };
129 
130 var exp={
131     idTmr:null,
132     getExplorer:function(){
133         var explorer = window.navigator.userAgent ;
134         if (explorer.indexOf("MSIE") >= 0) {
135             return 'ie';
136         }
137         else if (explorer.indexOf("Firefox") >= 0) {
138             return 'Firefox';
139         }
140         else if(explorer.indexOf("Chrome") >= 0){
141             return 'Chrome';
142         }
143         else if(explorer.indexOf("Opera") >= 0){
144             return 'Opera';
145         }
146         else if(explorer.indexOf("Safari") >= 0){
147             return 'Safari';
148         }
149     },
150     method:function(tableid){
151         if(exp.getExplorer()=='ie'){
152             var curTbl = document.getElementById(tableid);
153             var oXL = new ActiveXObject("Excel.Application");
154             var oWB = oXL.Workbooks.Add();
155             var xlsheet = oWB.Worksheets(1);
156             var sel = document.body.createTextRange();
157             sel.moveToElementText(curTbl);
158             sel.select();
159             sel.execCommand("Copy");
160             xlsheet.Paste();
161             oXL.Visible = true;
162             try{
163                 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
164             }catch(e){
165                 print("Nested catch caught " + e);
166             }finally{
167                 oWB.SaveAs(fname);
168                 oWB.Close(savechanges = false);
169                 oXL.Quit();
170                 oXL = null;
171                 exp.idTmr = window.setInterval("exp.Cleanup();", 1);
172             }
173         }else{
174             exp.tableToExcel(tableid)
175         }
176     },
177     Cleanup:function(){
178         window.clearInterval(exp.idTmr);
179         CollectGarbage();
180     },
181     tableToExcel:(function(){
182         var uri = 'data:application/vnd.ms-excel;base64,',
183                 template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
184                 base64 = function(s){ return window.btoa(unescape(encodeURIComponent(s))) },
185                 format = function(s, c){
186                     return s.replace(/{(\w+)}/g,
187                             function(m, p) { return c[p]; }) }
188         return function(table, name) {
189             if(!table.nodeType) table = document.getElementById(table)
190             var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
191             window.location.href = uri + base64(format(template, ctx))
192         }
193     })()
194 }
195 
196 //初始化
197 local.innt();
198 
199 //导出excel
200 $('#export').click(function(){
201     exp.method('table-main');
202 });
203 
204 //删除/修改
205 $(document).on('click','.operation button',function(){
206     var pet=$(this).parents('tr');
207     var code=pet.find('.code').text();
208     var index=$.inArray(code,local.code);
209     if($(this).hasClass('del')){
210         if(confirm("确定要删除这条数据？")){
211             local.code.splice(index,1);
212             local.num.splice(index,1);
213             pet.remove();
214             localStorage.code=local.code;
215             localStorage.num=local.num;
216         }
217     }else{
218         var pro=prompt('修改数量',local.num[index]);
219         local.num[index]=pro;
220         localStorage.num=local.num;
221         pet.find('.num').text(pro);
222     }
223 });
224 
225 //清除，测试用，可去掉
226 $('#clear').click(function(){
227     local.remove();
228 });
229 </script>
230 </body>
231 </html>

转载于:https://www.cnblogs.com/zhengjw/p/6945968.html

Linux????? Mr.Liyz

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
localStorage本地存储数组、读取、修改、删除

应用场景：用于记录扫码枪获取的编码数据，并存储在本地、计数。可修改，可导出excel。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Scanning</title...
复制链接

扫一扫