Parsing HTML5 storage functions and webSQL related operations _ html5 tutorial skills-

This article mainly introduces HTML5 Storage functions and webSQL related operations, including the use of Storage attributes and the use of JavaScript For webSQL operations, for more information, see html5. two mechanisms are introduced, similar to HTTP session cookies, to store structured data on the client and overcome the following Disadvantages.

Each HTTP request contains Cookies, causing the transmission of the same data to slow down our Web applications.

Each HTTP request contains Cookies, causing unencrypted data to be sent to the Internet.

Cookies can only store Limited 4 kb of data, not enough to store the required data.
The two storage methods are session storage and local storage, which are used to handle different situations.

Almost all the latest browsers support HTML5 storage, including IE browsers.

Session Storage
_ Session storage _ is designed for the scenario where the user executes a single transaction, but multiple transactions can be executed in different windows at the same time.

Example

For example, if a user buys a ticket in two different windows of the same website. If the website uses cookies to track user-purchased tickets, when a user clicks the page in the window, the currently purchased tickets from one window to the other will be "leaked ", this may cause the user to purchase two tickets for the same flight without notice.

HTML5 introduces the sessionStorage attribute. This website can be used to add data to the session storage. You can still access any page of the same site in the window that opens the session, when the window is closed, the session will also be lost.

The following code sets a session variable and then accesses the variable:

Copy XML/HTML Code to clipboard

6. Refresh the page to increase number of hits.

7. Close the window and open it again and check the result.

Local Storage
_ Local storage _ is designed to store data across multiple windows and remains in the current session. In particular, for performance reasons, Web applications may want to store millions of bytes of user data on the client, such as the entire document written by the user or the user's mailbox.

Cookies cannot handle this situation very well, because every request is transmitted.

Example

HTML5 introduces the localStorage attribute, which can be used to access the local storage area of the page without time restrictions. Local Storage is available whenever we use this page.

The following code sets a local storage variable, which can be accessed every time the page is accessed, or even the next time the window is opened:

Copy XML/HTML Code to clipboard

6. Refresh the page to increase number of hits.

7. Close the window and open it again and check the result.

Easy to learn about the above concepts-please perform online exercises.

Delete Web Storage
Storing sensitive data on a local machine may be dangerous and may cause security risks.

_ Session storage data _ the browser deletes the data immediately after the session ends.

To clear the local storage settings, call localStorage. remove ('key'); this 'key' is the key corresponding to the value we want to remove. To clear all settings, call the localStorage. clear () method.

The following code completely clears the local storage:

Copy XML/HTML Code to clipboard

6. Refreshing the page wocould not to increase hit counter.

7. Close the window and open it again and check the result.

Web SQL database
Web SQL database API is not part of the HTML5 specification, but it is an independent specification that introduces a group of APIs that use SQL to operate the client database.
Core Methods
The following are the three core methods defined in the specification. It will also be covered in this tutorial:

OpenDatabase: This method creates a database object using an existing database or a new database.
Transaction: This method allows us to control a transaction and perform commit or rollback based on this situation.
ExecuteSql: This method is used to execute the actual SQL query.
Enable Database
If the database already exists, the openDatabase method is responsible for enabling the database. If the database does not exist, this method will create it.

Use the following code to create and enable a database:

Copy the content to the clipboard using JavaScript Code

1. Var db = openDatabase ('mydb', '1. 0', 'test db', 2*1024*1024 );

The preceding method accepts the following five parameters:

Database Name
Version Number
Description text
Database size
Create callback
The last and fifth parameters are called after the database is created. However, even if this feature is not available, the database and the correct version will still be created during the runtime.

Execute Query
You must use the database. transaction () function to execute the query. This function requires a parameter. It is a function responsible for actually executing the query, as shown below:

Copy the content to the clipboard using JavaScript Code

1. Var db = openDatabase ('mydb', '1. 0', 'test db', 2*1024*1024 );
2. Db. transaction (function (tx ){
3. Tx.exe cuteSql ('create table if not exists logs (id unique, log )');
4. });

The preceding query statement creates a LOGS table in the 'mydb' database.

Insert operation
To create entries in the table, we add a simple SQL query in the preceding example, as shown below:

Copy the content to the clipboard using JavaScript Code

1. Var db = openDatabase ('mydb', '1. 0', 'test db', 2*1024*1024 );
2. Db. transaction (function (tx ){
3. Tx.exe cuteSql ('create table if not exists logs (id unique, log )');
4. Tx.exe cuteSql ('insert into logs (id, log) VALUES (1, "foobar ")');
5. Tx.exe cuteSql ('insert into logs (id, log) VALUES (2, "logmsg ")');
6. });

You can also pass the following dynamic values when creating an entry:

Copy the content to the clipboard using JavaScript Code

1. Var db = openDatabase ('mydb', '1. 0', 'test db', 2*1024*1024 );
2. Db. transaction (function (tx ){
3. Tx.exe cuteSql ('create table if not exists logs (id unique, log )');
4. Tx.exe cuteSql ('insert INTO LOGS
5. (Id, log) VALUES (?, ? '), [E_id, e_log];
6. });

Here, e_id and e_log are external variables, and executeSql maps each entry in the array parameter "? ".

Read operation
To read existing records, we can use callback to capture the results, as shown below:

Copy the content to the clipboard using JavaScript Code

1. Var db = openDatabase ('mydb', '1. 0', 'test db', 2*1024*1024 );
2. Db. transaction (function (tx ){
3. Tx.exe cuteSql ('create table if not exists logs (id unique, log )');
4. Tx.exe cuteSql ('insert into logs (id, log) VALUES (1, "foobar ")');
5. Tx.exe cuteSql ('insert into logs (id, log) VALUES (2, "logmsg ")');
6. });
7. Db. transaction (function (tx ){
8. Tx.exe cuteSql ('select * FROM logs', [], function (tx, results ){
9. Var len = results. rows. length, I;
10. Msg ="

    Found rows: "+ len +"

    ";
11. Document. querySelector ('# status'). innerHTML + = msg;
12. For (I = 0; I <len; I ++ ){
13. Alert (results. rows. item (I). log );
14. }
15. }, Null );
16. });

Final example
Finally, we put this example in the complete HTML5 document shown below, and then try to run it in Safari:

Copy the content to the clipboard using JavaScript Code