localStorage本地存储数组、读取、修改、删除
2024-06-06 23:20:55
应用场景：用于记录扫码枪获取的编码数据，并存储在本地、计数。可修改，可导出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
localStorage本地存储数组、读取、修改、删除相关推荐
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介 定时器-延时函数 5秒关闭广告案例 递归模拟setInterval函数 两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
- C# 使用自定义类+字典+JSON填充数据，脱离真实数据库，实现简单的增删改查和本地存储与读取数据
前言 这个文章将不会用到数据库,另辟蹊径去实现本地的存储与读取,增删改查!~ 之前写项目用到的思路,因为是非常小的项目,不想依赖数据库来增删改查,以此避免复杂的数据库环境支持和安装.之前想上网查找有没 ...
- html5保存资源本地,html5之Localstorage本地存储
题外话 今天把博客里面的内容,同步在github的issues中了.具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star. L ...
- js本地存储函数封装基于localStorage本地存储
函数封装 //基于localStorage本地存储 var store={set:function(name, value, day) { // 设置let d = new Date()let tim ...
- HTML5 LocalStorage 本地存储
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- localstorage本地存储
本文来自:http://2806814127.iteye.com/blog/2314656 本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以 ...
- HTML5 LocalStorage 本地存储，刷新值还在
这里是新手了解,生产用到的话,请移到具有兼容性好的 store.js H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStor ...
- HTML5 LocalStorage 本地存储原理详解
说到Web开发中的本地存储,大家最先想到的应该就是Cookies这玩意了,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太 ...
最新文章
- 四种常见NLP框架使用总结
- BZOJ 4665: 小w的喜糖
- C#基础(七）虚函数
- 【MySql】mysql-5.7.20-winx64安装配置
- PHP 如何阻止用户上传成人照片或者裸照
- POJ - 3258 River Hopscotch(二分水题)
- Google推出了Python最牛逼的编辑器，不看后悔一辈子！
- WIN7部分程序中文乱码的简单解决方法
- Python——字典生成式
- xcode 中不小心删除 stroryboard 的恢复办法
- linux服务器的又一管理利器webmin图解教程
- 解决SVG animation 在IE中不起作用
- 关于MSN群 创建MSN群 使用MSN群
- 微软操作系统 Windows Server 2012 R2 官方原版镜像
- Ubuntu安装基础教程(No Zuo No Die)
- Ubuntu18.04安装坚果云
- LwIP应用笔记（二）：无操作系统支持下的RAW API移植
- 微软专利展示了具有灵活触控笔的双屏设备
- 网页爬虫为什么需要爬虫ip
- C# 将字符串（符合xml格式）与XML互转