HTML5 new features used in hybrid app development localstorage, Sessionstorage, and Websql database

Recently in the Project Hybrid app development, the project has a large number of JS code running on Android devices. The use of a lot of HTML5 new features, have not encountered before, do not understand, here to record the knowledge of adding point front. In hybrid app development, it's often necessary to use caching features, such as when you enter data on a page form control, and you want to see it again the next time you exit the app, such as having the ability to save drafts in your project, just temporarily storing the data locally and then referring to the server later. This requires that we store the data locally, which requires a localized storage solution in HTML5. This paper mainly introduces the 3 storage schemes of Sessionstorage, Localstorage and Websql database.

Sessionstorage and Localstorage These 2 scenarios, the use of the API is identical, very simple, specific use can refer to the "HTML5 localstorage local Storage" this article. the differences between Sessionstorage and Localstorage are as follows:

The Web Storage in HTML5 includes two ways of storage: Sessionstorage and Localstorage. Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage. When the browser window is closed, the data in the Sessionstorage is cleared. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted.

you can see that localstorage has many advantages over ancient cookie technology, but there are also security issues with Localstorage. For security issues with local storage, refer to the "HTML5 Local storage localstorage Security Analysis" article

It is worth noting thatboth Sessionstorage and localstorage are differentiated by cross-domain.

The http://localhost:8080/demo/1.html code is as follows:

<! DOCTYPE html> 

The http://localhost:9090/demo/9090.html code is as follows:
<! DOCTYPE html> 
The data stored locally under the localhost:8080 domain cannot be accessed under the localhost:9090 domain. You can see that the localhost:9090 does not have locally cached data under this domain. 


Localstorage can only store simple format data key-value this data format, and Websql storage scheme provides a table similar to relational database, capable of manipulating the database in the form of SQL statements. Websql is also easy to use:
<script type= "Text/javascript" >var db = Window.opendatabase ("Cachedb", "1.0", "Cache Database", ten * 1024*1024);d b . Transaction (function (TX) {    var sql = ' CREATE TABLE IF not EXISTS t_app_cache (key text primary key, value text) '; Tx. ExecuteSQL (SQL);  }); Db.transaction (Function (TX) {tx.executesql (' INSERT into T_app_cache (key, value) VALUES ("1", "A1");  Tx.executesql (' INSERT into T_app_cache (key, value) VALUES ("2", "A2") ');  }); </script>
you can read the Web SQL database specification for more details on how to use the API. You can read the article "Building Applications based on Web SQL database in HTML5" to get started and learn how websql is used. Last mention: Websql and Localstorage are also distinguished by domain, and one domain cannot access a database under another domain. 

 HTML5 new features used in hybrid app development localstorage, Sessionstorage, and Websql database