Simple use of html5 local storage web storage

A very cool function of html5 is web storage, which is similar to the previous cookie. However, unlike this, web storage can store 5 MB of local capacity, cookie is only 4 K, which is an incomparable advantage.

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:

A demo is provided to demonstrate the functions:

 (     $(         $.fn.getFormParam=              serializeObj=              array=              str=             $(array).each(                 (serializeObj[                     ($.isArray(serializeObj[                         serializeObj[.name].push(                     }                         serializeObj[.name]=[serializeObj[.name],                  }                     serializeObj[.name]=                           storageFile =JSON.parse(window.localStorage.getItem('demo'         $.each(storageFile,              $('#demoForm').find('[name="'+i+'"]'           $('#demoForm').find('[type="submit"]').on('click',               data = $('#demoForm'             window.localStorage.setItem('demo'                 })(jQuery)

Html code:

Document name age student ID address other hobbies

In this way, a simple demo of localstorage is implemented.

2 sessionStorage

SessionStorage is used in the same way as localStorage. However, sessionStorage is cleared when the browser closes the website, while localStorage is always saved in the browser.

3. Local Database

Those familiar with IOS/Android development should be familiar with SQLite databases.

The database operations in html5 are relatively simple, mainly including the openDatabase method and the transaction method.

An object db is used to receive the database access objects created by openDatabase.

  db = openDatabase(databasename,version,description,size)

Where

Databasename: Database Name

Version: the database version is optional.

Desription: Database description

Size: size of allocated database space

 

The transaction method uses a callback function as a parameter to execute a specific method for accessing the database in the function.

 db.transaction(     tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler) });

The executeSql method has the following four parameters:

• SqlQuery: the SQL statement to be executed. create | select | update | delete;
• [Value1, value2...]: an array of all the parameters used in an SQL statement. In the executeSql method, use "?" to specify the parameters used in an SQL statement. Replace, and put these parameters in the second array in sequence;
• DataHandler: callback function for successful execution;
• ErrorHandler: callback function for execution failure;