Easyui-based local storage (Web Storage)

Source: Internet
Author: User
Tags sessionstorage

Web storage is a very important feature introduced by HTML5, which can store data locally on the client, similar to HTML4 cookies, but can be implemented much more powerful than cookies, and cookie size is limited to 4kb,web  Storage is officially recommended for each website 5MB. Web storage is divided into two kinds: sessionstoragelocalstorage from the literal meaning can be clearly seen, sessionstorage to save the data in the session, browser Close also no While Localstorage keeps the data on the client side, whether it's sessionstorage or Localstorage, the APIs are the same, Commonly used are the following (taking Localstorage as an example): Save data: Localstorage.setitem (key,value); Read data: Localstorage.getitem (key); Delete a single data: Localstorage.removeitem (key); Delete all data: Localstorage.clear (); Get an index of Key:localStorage.key (index); we all know that The data of our Easyui is loaded into the table by the data form of the object data JSON, then we save it in the same data form to the local, we will read the stored JSON data from the local after each entry. Here is the data stored in the table. Use of local storage://Create an Entity array var cachearray = new cachearrayutil (); one,//splice save to local object var object =  {"Waybillcode": Waybillcode, "operationdate": Operationdate, "Scantime": Scantime, "Sonno": SonNo, "ParcelNumber ":p arcelnumber," weight ": Weight," ScanType ": ScanType," Scanstaff ": Scanemployee," Sortingsite ": Sortingsite," Sendman ": CustomerName," entrydepartment ": keyindepartmen," remark ": remark}//will SpliceThe data is added to the array Cachearray.add (object);//Offline storage cachearray.commit (); second,//define save to local key value var sendscankey =  ' Topiecesscan '; ...//Omit the Easyui datagrid attribute section/** the page table loads, load the data that I have stored locally. */var myinfo=eval () ( Cachearray.getlocalstorageitem ());//associated to the user I am currently logged on to (only the local storage data for my currently logged on user) var tempusername =  Cachearray.savestorageusername ();if  (username==tempusername)  { if (myInfo != null  && myinfo.length>0)  {  cacheArray.myArray =  CacheArray.myArray.concat (MyInfo);  }//loads the locally acquired data into the table.  $ ("#table_id"). DataGrid ("LoadData", Cachearray.myarray);} The clear () method in JS below is to clear my local storage data. Note: All the data in the table is loaded with JSON data from my local storage three, the related js//  constructor steals Function cachearrayutil ()  {     this.myarray=new array ();} Add data to the array in Cachearrayutil.prototype.add=function (object)  {  this.myarray.push (object);} Offline storage cachearrayutil.prototype.commit=function ()  { localstorage.setitem (Sendscankey,Json.stringify (This.myarray));  localstorage.setitem ("username", username);} Get offline storage Data cachearrayutil.prototype.getlocalstorageitem=function ()  { return localstorage.getitem (Sendscankey);} Get offline storage for users cachearrayutil.prototype.savestorageusername=function ()  { return  Localstorage.getitem ("username");} Gets the number of locally stored data records cachearrayutil.prototype.size=function ()  { return this.myarray.length;} Delete 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);Empty array  for (var i=0 ;i<temp.length; i++)  {  this.myarray.push (Temp[i]);  }  //sets the cache array to the data  localstorage.setitem (Sendscankey,json.stringify (This.myarray)) after deletion of the current period;} Clear all data (including offline data) Cachearrayutil.prototype.clear = function ()  { var datas =  This.myarray; var lens = datas.length; this.myarray.splice (0,lens);//Empty array   Localstorage.removeitem (Sendscankey);}

Easyui-based local storage (Web Storage)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.