HTML5 Local Storage

[[145256]]

What is localstorage

A few days ago, I found some strange operations on cookies in an old project. After consulting, I found that some information was cached to avoid passing parameters on the URL, but I didn’t consider what problems cookies would bring:

1. The cookie size is limited to about 4k, which is not suitable for storing business data
2. Cookies are sent with each HTTP transaction, wasting bandwidth

We are working on a mobile project, so the technology that is really suitable for use here is localstorage. Localstorage can be said to be an optimization of cookies. It can be used to store data on the client and will not be transmitted with HTTP, but it is not without problems:

1. The localstorage size limit is about 5 million characters, and it varies from browser to browser.
2. localstorage is not readable in privacy mode
3. The essence of localstorage is to read and write files. If there is a lot of data, it will be slow (Firefox will import the data into the memory at once, which is scary to think about)
4. localstorage cannot be crawled by crawlers, so don't use it to completely replace URL parameter passing

The above problems can be avoided, so our focus should be on how to use localstorage and how to use it correctly.

Use of localstorage

Basics

There are two types of localstorage storage objects:

① sessionStrage: session means conversation. Here, session refers to the time period from when a user browses a website to when he or she closes the website. The validity period of the session object is only this long.

② localStorage: Save the data on the client hardware device, no matter what it is, which means that the data will still be there when you turn on the computer next time.

The difference between the two is that one is for temporary storage and the other is for long-term storage.

Here is a simple code to illustrate its basic use:

 < div   id = "msg"   style ="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
 height: 100px;" >  
 </ div >  
 < input   type = "text"   id = "text"   />  
 < select   id = "type" >  
 < option   value = "session" > sessionStorage </ option >  
 < option   value = "local" > localStorage </ option >  
 </ select >  
 < button   onclick = "save();" >  
 Save data </ button >  
 < button   onclick = "load();" >  
 Read data </ button >  
 < script   type = "text/javascript" >  
   var msg = document .getElementById('msg'),
 text = document .getElementById('text'),
 type = document .getElementById('type'); 
  
 function save() {
 var str = text.value ;
 var t = type.value ;
 if ( t == 'session') {
       sessionStorage.setItem('msg', str);
 } else {
       localStorage.setItem('msg', str);
 }
 } 
  
 function load() {
 var t = type.value ;
 if ( t == 'session') {
 msg.innerHTML = sessionStorage .getItem('msg');
 } else {
 msg.innerHTML = localStorage .getItem('msg');
 }
 }
 </ script >  

Real-world scenarios

In actual work, the use of localstorage generally has the following requirements:

① Cache general information, such as the departure city, arrival city, and non-real-time location information on the search page

② Cache city list data, which is often large

③ Each cached information needs to be traceable. For example, when the server notifies the city data to be updated, it should automatically expire when it is last accessed.

④ Each piece of information has an expiration date, and the server needs to pull data outside the expiration date

⑤ ......

 define([], function () { 
  
 var Storage = _.inherit({
 //Default properties  
 properties: function () { 
  
 //Proxy object, default is localstorage  
 this .sProxy = window.localStorage; 
  
 //60 * 60 * 24 * 30 * 1000 ms == 30 days  
 this .defaultLifeTime = 2592000000 ; 
  
 //The local cache is used to store the mapping of all localstorage key values ​​and expiration dates  
 this .keyCache = 'SYSTEM_KEY_TIMEOUT_MAP' ; 
  
 //When the cache capacity is full, the number of caches deleted each time  
 this .removeNum = 5 ; 
  
 }, 
  
 assert : function () {
 if ( this .sProxy === null ) {
 throw   'not override sProxy property' ;
 }
 }, 
  
     initialize: function (opts) {
 this .propertys();
 this . assert ();
 }, 
  
 /*
 Added localstorage
 The data format includes unique key value, json string, expiration date, and deposit date.
 sign is a formatted request parameter, which is used to return new data when the same request has different parameters. For example, if the list is a city in Beijing and then switches to Shanghai, it will determine that the tag is different and update the cached data. The tag is equivalent to the signature.
 Only one piece of information will be cached for each key value
 */  
     set: function (key, value, timeout, sign) {
 var _d = new Date();
 //Deposit date  
       var indate = _d.getTime(); 
  
 //Finally saved data  
 var entity = null ; 
  
 if (!timeout) {
         _d.setTime(_d.getTime() + this .defaultLifeTime);
         timeout = _d.getTime();
 } 
 
 //  
 this .setKeyCache(key, timeout);
       entity = this .buildStorageObj(value, indate, timeout, sign); 
  
 try {
 this .sProxy.setItem(key, JSON.stringify(entity));
 return   true ;
 } catch (e) {
 //When localstorage is full, clear it all  
 if (e.name == 'QuotaExceededError' ) {
 // this.sProxy.clear();  
 //When localstorage is full, select the data closest to the expiration time for deletion. This will also have some impact, but it feels better than clearing all. If there are too many caches, this process will take time, within 100ms  
 if (! this .removeLastCache()) throw   'The amount of data stored this time is too large' ;
 this .set(key, value, timeout, sign);
 }
         console && console.log(e);
 }
 return   false ;
 }, 
  
 //Delete expired cache  
     removeOverdueCache: function () {
       var tmpObj = null , i, len; 
  
       var now = new Date().getTime();
 //Get the key-value pair  
       var cacheStr = this .sProxy.getItem( this .keyCache);
 var cacheMap = [];
 var newMap = [];
 if (!cacheStr) {
 return ;
 } 
  
       cacheMap = JSON.parse(cacheStr); 
  
 for (i = 0 , len = cacheMap.length; i < len; i++) {
         tmpObj = cacheMap[i];
 if (tmpObj.timeout < now) {
 this .sProxy.removeItem(tmpObj.key);
 } else {
           newMap.push(tmpObj);
 }
 }
 this .sProxy.setItem( this .keyCache, JSON.stringify(newMap)); 
  
 }, 
  
     removeLastCache: function () {
 var i, len;
       var num = this .removeNum || 5 ; 
  
 //Get the key-value pair  
       var cacheStr = this .sProxy.getItem( this .keyCache);
 var cacheMap = [];
 var delMap = []; 
  
 //Indicates that the storage is too large  
 if (!cacheStr) return   false ; 
  
       cacheMap.sort(function (a, b) {
 return a.timeout - b.timeout;
 }); 
  
 //What data was deleted  
       delMap = cacheMap.splice( 0 , num);
 for (i = 0 , len = delMap.length; i < len; i++) {
 this .sProxy.removeItem(delMap[i].key);
 } 
  
 this .sProxy.setItem( this .keyCache, JSON.stringify(cacheMap));
 return   true ;
 }, 
  
     setKeyCache: function (key, timeout) {
 if (!key || !timeout || timeout < new Date().getTime()) return ;
 var i, len, tmpObj; 
  
 //Get the currently cached key value string  
       var oldstr = this .sProxy.getItem( this .keyCache);
 var oldMap = [];
 //Does the current key already exist?  
 var flag = false ;
 var obj = {};
 obj.key = key;
 obj.timeout = timeout; 
  
 if (oldstr) {
         oldMap = JSON.parse(oldstr);
 if (!_.isArray(oldMap)) oldMap = [];
 } 
  
 for (i = 0 , len = oldMap.length; i < len; i++) {
 tmpObj = oldMap[i];
 if (tmpObj.key == key) {
 oldMap[i] = obj;
 flag = true ;
 break ;
 }
 }
 if (!flag) oldMap.push(obj);
 //***Put the new array into the cache  
 this .sProxy.setItem( this .keyCache, JSON.stringify(oldMap)); 
  
 }, 
  
     buildStorageObj: function (value, indate, timeout, sign) {
 var obj = {
 value: value,
 timeout: timeout,
 sign: sign,
 indate: indate
 };
 return obj;
 }, 
  
     get: function (key, sign) {
       var result, now = new Date().getTime();
 try {
         result = this .sProxy.getItem(key);
 if (!result) return   null ;
         result = JSON.parse(result); 
  
 //Data expired  
 if (result.timeout < now) return   null ; 
  
 // Need to verify the signature  
 if (sign) {
 if (sign === result.sign)
 return result.value;
 return   null ;
 } else {
 return result.value;
 } 
  
 } catch (e) {
         console && console.log(e);
 }
 return   null ;
 }, 
  
 //Get the signature  
     getSign: function (key) {
       var result, sign = null ;
 try {
         result = this .sProxy.getItem(key);
 if (result) {
           result = JSON.parse(result);
           sign = result && result.sign
 }
 } catch (e) {
         console && console.log(e);
 }
 return sign;
 }, 
  
 remove: function (key) {
 return   this .sProxy.removeItem(key);
 }, 
  
 clear: function () {
 this .sProxy.clear();
 }
 }); 
 
   Storage.getInstance = function () {
 if ( this .instance ) {
 return   this .instance;
 } else {
 return   this .instance = new   this ();
 }
 }; 
  
 return Storage; 
  
 });

This code contains the basic operations of localstorage and handles the above problems, but the actual use needs to be abstracted further:

 define([ 'AbstractStorage' ], function (AbstractStorage) { 
 
 var Store = _.inherit({
 //Default properties  
 properties: function () { 
 
 //Each object must have a storage key and cannot be repeated  
 this .key = null ; 
 
 //Default life cycle of a piece of data, S is seconds, M is minutes, D is days  
 this .lifeTime = '30M' ; 
 
 //Default return data  
 // this.defaultData = null;   
 
 //Proxy object, localstorage object  
 this .sProxy = new AbstractStorage(); 
 
 }, 
 
    setOption: function (options) {
      _.extend( this , options);
 }, 
 
 assert : function () {
 if ( this .key === null ) {
 throw   'not override key property' ;
 }
 if ( this .sProxy === null ) {
 throw   'not override sProxy property' ;
 }
 }, 
 
    initialize: function (opts) {
 this .propertys();
 this .setOption(opts);
 this . assert ();
 }, 
 
    _getLifeTime: function () {
 var timeout = 0 ;
      var str = this .lifeTime;
      var unit = str.charAt(str.length - 1 );
      var num = str.substring( 0 , str.length - 1 );
 var Map = {
 D: 86400 ,
 H: 3600 ,
 M: 60 ,
 S: 1  
 };
 if (typeof unit == 'string' ) {
        unit = unit.toUpperCase();
 }
 timeout = num;
 if (unit) timeout = Map[unit]; 
 
 //The unit is milliseconds  
 return num * timeout * 1000 ;
 }, 
 
 //Cache data  
    set: function (value, sign) {
 //Get the expiration time  
      var timeout = new Date();
      timeout.setTime(timeout.getTime() + this ._getLifeTime());
 this .sProxy.set( this .key, value, timeout.getTime(), sign);
 }, 
 
 //Set a single property  
    setAttr: function (name, value, sign) {
 var key, obj;
 if (_.isObject(name)) {
 for (key in name) {
 if (name.hasOwnProperty(key)) this .setAttr(k, name[k], value);
 }
 return ;
 } 
 
 if (!sign) sign = this .getSign(); 
 
 //Get the current object  
      obj = this .get(sign) || {};
 if (!obj) return ;
 obj[name] = value;
 this .set(obj, sign); 
 
 }, 
 
 getSign: function () {
 return   this .sProxy.getSign( this .key);
 }, 
 
 remove: function () {
 this .sProxy.remove( this .key);
 }, 
 
    removeAttr: function (attrName) {
      var obj = this .get() || {};
 if (obj[attrName]) {
 delete obj[attrName];
 }
 this .set(obj);
 }, 
 
 get: function (sign) {
      var result = [], isEmpty = true , a;
      var obj = this .sProxy.get( this .key, sign);
 var type = typeof obj;
      var o = { 'string' : true , 'number' : true , 'boolean' : true };
 if (o[type]) return obj; 
 
 if (_.isArray(obj)) {
 for (var i = 0 , len = obj.length; i < len; i++) {
 result[i] = obj[i];
 }
 } else   if (_.isObject(obj)) {
 result = obj;
 } 
 
 for (a in result) {
 isEmpty = false ;
 break ;
 }
 return !isEmpty ? result : null ;
 }, 
 
    getAttr: function (attrName, tag) {
      var obj = this .get(tag);
 var attrVal = null ;
 if (obj) {
        attrVal = obj[attrName];
 }
 return attrVal;
 } 
 
 }); 
 
  Store.getInstance = function () {
 if ( this .instance ) {
 return   this .instance;
 } else {
 return   this .instance = new   this ();
 }
 }; 
 
 return Store;
 });

When we actually use it, we use the store class to operate localstorage. The code ends with a simple test:

The storage is completed and no requests will be made in the future, so today's code is basically finished.

other

In privacy mode, window.name can be used to simulate sessionStorage, because window.name can be saved, which is also the reason why it solves the cross-domain solution.

There is a back button in Android Hybrid. Once pressed, it will return to the previous page. At this time, the localstorage in it may be invalid! A simple but unreliable solution is to add in the webapp:

 window.onunload = function () { }; //Suitable for single-page applications. Don’t ask me why. I don’t know either.    

Conclusion

Localstorage is an essential technical point for mobile development, which requires in-depth understanding. The specific business code will be put on git later. Interested friends can go to learn more