基于easyui的本地存储（web storage）

2019独角兽企业重金招聘Python工程师标准>>>

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);
}

转载于:https://my.oschina.net/673236963/blog/506385