Shulou(Shulou.com)06/01 Report--

This article mainly explains "HTML5 storage function and how to operate network SQL". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "HTML5 storage function and how to operate network SQL" together!

HTML5 uses HTTP cookies to store structured data on the client side and to overcome the following shortcomings.

Cookies are included in every HTTP request, resulting in the transfer of the same data slowing down our Web applications.

Cookies are included in every HTTP request, resulting in unencrypted data being sent to the Internet.

Cookies can store only a limited 4KB of data, which is not enough to store the required data. The two storage methods are session storage and local storage, which will be used to handle different situations.

HTML5 storage is supported in almost all recent versions of browsers, including Internet Explorer.

session storage

_Session Store_is designed for scenarios where users use a single transaction, but multiple transactions can be executed simultaneously in different windows.

example

If the website uses cookies to track tickets purchased by users, the currently purchased tickets will "leak" from one window to another when the user clicks on the page in the window, which may cause the user to purchase two tickets for the same flight without paying attention.

HTML5 session store property, this site can add data to the session store, users can still access any page of the same site in the open window holding the session, when the window is closed, the session will also be lost.

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

XML / HTML code copies content to text

if（sessionStorage.hits）{

sessionStorage.hits = number (sessionStorage.hits)+1;

} Other {

sessionStorage.hits = 1 ;

}

[xss_clean]("Total hits: " + sessionStorage.hits);

Refresh page to increase number of hits.

Close the window, then open it again and check the results.

local is

For performance reasons, a Web application may want to store millions of bytes of user data on the client side, such as entire documents written by the user or the user's mailbox.

Cookies do not handle this situation well because every request is transmitted.

example

HTML5 publishes the localStorage attribute, which can be used to access the local storage area of a page without time constraints, and local storage is available whenever we use the page.

The following code sets a locally stored variable that can be accessed every time the page is accessed, even the next time the window is opened:

XML / HTML code copies content to text

if（localStorage.hits）{

localStorage.hits = number (localStorage.hits)+1;

} Other {

localStorage.hits = 1 ;

}

[xss_clean]("Total hits: " + localStorage.hits);

Refresh page to increase number of hits.

Close the window, then open it again and check the results.

Easy to learn the above concepts-please practice online.

Delete Web Store

Storing sensitive data on local machines can be dangerous and can leave a security risk.

_Session storage data_deleted by browser immediately after session termination.

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

The following code clears the local store completely:

XML / HTML code copies content to text

localStorage.clear（）;

//Reset the number of clicks.

if（localStorage.hits）{

localStorage.hits = number (localStorage.hits)+1;

} Other {

localStorage.hits = 1 ;

}

[xss_clean]("Total hits: " + localStorage.hits);

Refreshing the page does not increment the click counter.

Close the window, then open it again and check the results.

Web SQL Database

The Web SQL database API is not part of the HTML5 specification, but it is a separate specification that uses SQL to manipulate client-side databases. Core Methods Below are three core methods defined in the specification. Also covered in this tutorial:

openDatabase: This method creates a transaction for a database object using an existing database or a newly created database: 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. The openDatabase method is responsible for opening the database if it already exists, or creating it if it doesn't.

Use the following code to create and open a database:

JavaScript code copies content to

var db = openDatabase（'mydb' ， '1.0' ， 'Test DB' ，2 * 1024 * 1024）;

The above method accepts the following five parameters:

Database Name Version Number Description Text Database Size The last and fifth parameter to be created, Create Reference is called after the database is created. However, even without this feature, the runtime will still create the database and the correct version.

execute the query

Executing the query requires the database.transaction () function. This function takes a parameter, which is a function responsible for actually executing the query, as follows:

JavaScript code copies content to

var db = openDatabase（'mydb' ， '1.0' ， 'Test DB' ，2 * 1024 * 1024）;

db.transaction (function (tx){

tx.executeSql ('create table (id unique, log) if log does not exist');

}）;

The query above creates a table called LOGS in the 'mydb' database.

insert operation

To create a merge in the table, we add a simple SQL query to the example above, as follows:

JavaScript code copies content to

var db = openDatabase（'mydb' ， '1.0' ， 'Test DB' ，2 * 1024 * 1024）;

db.transaction (function (tx){

tx.executeSql ('create table (id unique, log) if log does not exist');

tx.executeSql ('Insert log into (ID, log) value (1," foobar")');

tx.executeSql ('Insert log into (ID, log) value (2," logmsg")');

}）;

You can also pass dynamic values like this when creating:

JavaScript code copies content to

var db = openDatabase（'mydb' ， '1.0' ， 'Test DB' ，2 * 1024 * 1024）;

db.transaction (function (tx){

tx.executeSql ('create table (id unique, log) if log does not exist');

tx.executeSql ('Insert log into log

(id, log) Value (?,? ' ），[e_id，e_log];

}）;

Here e_id and e_log are external variables, executeSql maps each of the array parameters to "? "。

read operation

To read records that already exist, we can use substitution to capture the results, as follows:

JavaScript code copies content to

var db = openDatabase（'mydb' ， '1.0' ， 'Test DB' ，2 * 1024 * 1024）;

db.transaction (function (tx){

tx.executeSql ('create table (id unique, log) if log does not exist');

tx.executeSql ('Insert log into (ID, log) value (1," foobar")');

tx.executeSql ('Insert log into (ID, log) value (2," logmsg")');

}）;

db.transaction (function (tx){

tx.executeSql ('SELECT * FROM LOGS',[], function (tx, result){

var len = results.rows.length，i;

msg = "

Lines found: " + len + " " ;

document.querySelector（'#status' ）[xss_clean] + = msg;

For (i = 0; i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.