Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。 Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地; 不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例): 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index); 大家都知道,我们的easyui的数据都是已对象数据json的数据形式加载到表格的,那么保存的时候我们则通过同样的数据形式保存到本地,每次进入后我们会从本地去读取存储的json数据。下面是有关表格里面的数据存储的。 本地存储的使用: //创建实体数组 var cacheArray = new CacheArrayUtil(); 一、 //拼接保存到本地的对象 var object = {"waybillCode":waybillCode,"operationDate":operationDate,"scanTime":scanTime,"sonNo":sonNo,"parcelNumber":parcelNumber,"weight":weight,"scanType":scanType,"scanStaff":scanEmployee,"sortingSite":sortingSite,"sendMan":customerName,"entryDepartment":keyinDepartmen,"remark":remark} //将拼接的数据添加到数组 cacheArray.add(object); //离线存储 cacheArray.commit(); 二、 //定义保存到本地的键值 var sendScanKey = ‘topiecesscan‘; ...................//省略easyui datagrid属性部分 /** 页面表格加载的时候,就加载我本地存储好的数据. */ var myInfo=eval(cacheArray.getLocalStorageItem()); //关联到我当前登录的用户(只能获取我当前登录用户的本地存储数据) var tempUserName = cacheArray.saveStorageUserName(); if (username==tempUserName) { if(myInfo != null && myInfo.length>0) { cacheArray.myArray = cacheArray.myArray.concat(myInfo); } //将本地获取的数据加载到表格。 $("#table_id").datagrid("loadData",cacheArray.myArray); } 下面js中的clear()方法就是清除我本地的存储数据。 注:表格里面所有的数据,从头到尾都是加载我本地的存储的json数据 三、相关的js // 构造函数窃取 function CacheArrayUtil() { this.myArray=new Array(); } //添加数据到数组中 CacheArrayUtil.prototype.add=function(object) { this.myArray.push(object); } //离线存储 CacheArrayUtil.prototype.commit=function() { localStorage.setItem(sendScanKey,JSON.stringify(this.myArray)); localStorage.setItem("username",username); } //获取离线存储数据 CacheArrayUtil.prototype.getLocalStorageItem=function() { return localStorage.getItem(sendScanKey); } //获取离线存储的用户 CacheArrayUtil.prototype.saveStorageUserName=function() { return localStorage.getItem("username"); } //获取本地存储数据记录数 CacheArrayUtil.prototype.size=function() { return this.myArray.length; } //删除 CacheArrayUtil.prototype.remove = function(billno){ var datas = this.myArray; var lens = datas.length; if(datas != null && lens > 0) { var temp = new Array(); for(var i=0; i<lens; i++) { if(datas[i].waybillCode!=billno && datas[i].wayBillNo!=billno){ temp.push(datas[i]); } } } this.myArray.splice(0,lens);//清空数组 for(var i=0 ;i<temp.length; i++) { this.myArray.push(temp[i]); } //把缓存数组设置为当期删除过后数据 localStorage.setItem(sendScanKey,JSON.stringify(this.myArray)); } //清除全部数据(包含离线数据) CacheArrayUtil.prototype.clear = function() { var datas = this.myArray; var lens = datas.length; this.myArray.splice(0,lens);//清空数组 localStorage.removeItem(sendScanKey); }
原文:http://my.oschina.net/673236963/blog/506385