localStorage本地存储数组读取修改删除
Posted Z_嘎嘣脆
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了localStorage本地存储数组读取修改删除相关的知识，希望对你有一定的参考价值。
应用场景：用于记录扫码枪获取的编码数据，并存储在本地、计数。可修改，可导出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>
以上是关于localStorage本地存储数组读取修改删除的主要内容，如果未能解决你的问题，请参考以下文章