Simple use example of localstorage, local database, and sessionStorage for html5 local storage _ html5 tutorial tips-

This article mainly introduces simple use examples of localstorage, local database, and sessionStorage for html5 local storage. If you need it, you can refer to a very cool function of html5. it is web storage, similar to the previous cookie, however, the difference is that web storage has a local storage capacity of 5 MB, while the cookie is only 4 K, which is completely incomparable.
Webstrange is divided into localstorage, sessionstorage and local database.

Next I will introduce them one by one:

1. localstorage
Localstorage is easy to use by using the following methods:

The Code is as follows:

LocalStorage. setItem (key, value); // save data localStorage. getItem (key); // read data localStorage. removeItem (key); // deletes a single data localStorage. clear (); // delete all data keys: localStorage. key (index); // obtain the value of an index.

A demo is provided to demonstrate the functions:

The Code is as follows:

(function($){$(function(){$.fn.getFormParam=function(){var serializeObj={};var array=this.serializeArray();var str=this.serialize();$(array).each(function(){if(serializeObj[this.name]){if($.isArray(serializeObj[this.name])){serializeObj[this.name].push(this.value);}else{serializeObj[this.name]=[serializeObj[this.name],this.value];}}else{serializeObj[this.name]=this.value;}});return serializeObj;};
 
 var storageFile =JSON.parse(window.localStorage.getItem('demo'));$.each(storageFile, function(i, val){$('#demoForm').find('[name="'+i+'"]').val(val);});
 
 $('#demoForm').find('[type="submit"]').on('click', function(){var data = $('#demoForm').getFormParam();window.localStorage.setItem('demo', JSON.stringify(data));return false;});});})(jQuery)

Html code: