Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use Database Storage in HTML5 local storage

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

Editor to share with you how to use Database Storage in HTML5 local storage, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In addition to sessionStorage and localStorage, HTML5 also supports local data storage through a local database. HTML5 uses a file-based database of "SQLLite", which is mostly concentrated on embedded devices. Students who are familiar with IOS/Android development should be familiar with SQLLite databases.

The database operation in HTML5 is relatively simple, and there are two main functions:

1. Create an object that accesses the database through the openDatabase method

The code is as follows:

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

The method has four parameters, and the functions are as follows:

Databasename: database name

Version: database version number, which can be left empty

Description: database description

Size: the amount of space allocated to the database

2. Use the database access object created in the first step (such as db) to execute the transaction method to perform the transaction

The code is as follows:

Db.transaction (function (tx)) {

/ / execute the statement to access the database

});

The transaction method takes a callback function as a parameter, in which the specific operation of accessing the database is performed.

3. Execute the query through the executeSql method

The code is as follows:

Tx.executeSql (sqlQuery, [value1,value2..], dataHandler,errorHandler)

The executeSql method has four parameters, and the functions are as follows:

SqlQuery: the sql statement to be executed, which can be create, select, update, delete

[value1,value2..]: an array of all the parameters used in the sql statement. In the executeSql method, use "?" for the parameters to be used in the sql statement. Instead, and then put these parameters into an array in turn in the second parameter

DataHandler: successful execution is the callback function called, through which the query result set can be obtained.

ErrorHandler: callback function called when execution fails

This article re-implements the address book management in the previous article through the database support of HTML5. The functions to be implemented are as follows:

Contacts can be created and saved to the database. Contact fields include: name, mobile phone number, company, creation time.

List all currently saved contact information

Specific contact information can be deleted

Again, prepare a HTML page first, as follows:

The code is as follows:

Local database for local storage in HTML5

.addDiv {

Border: 2px dashed # ccc

Width:400px

Text-align:center

}

The interface is shown as follows:

To create a new contact and store it in the database, you need the following simple JS code:

The code is as follows:

/ / Open the database

Var db = openDatabase ('contactdb','','local database demo',204800)

/ / Save data

Function save () {

Var user_name = document.getElementById ("user_name") .value

Var mobilephone = document.getElementById ("mobilephone") .value

Var company = document.getElementById ("company") .value

/ / creation time

Var time = new Date () .getTime ()

Db.transaction (function (tx) {

Tx.executeSql ('insert into contact values (,)', [user_name,mobilephone,company,time], onSuccess,onError)

});

}

Callback function executed after successful execution of / / sql statement

Function onSuccess (tx,rs) {

Alert ("Operation successful")

LoadAll ()

}

/ / callback function executed after failed execution of sql statement

Function onError (tx,error) {

Alert ("Operation failed, failure message:" + error.message)

}

To display all the currently saved contact lists, you can use the following JS code:

The code is as follows:

/ / remove all contacts stored in the sqlLite database

Function loadAll () {

Var list = document.getElementById ("list")

Db.transaction (function (tx) {

/ / if the data table does not exist, create the data table

Tx.executeSql ('create table if not exists contact (name text,phone text,company text,createtime INTEGER)', [])

/ / query all contact records

Tx.executeSql ('select * from contact', [], function (tx,rs) {

If (rs.rows.length > 0) {

Var result = ""

Result + = "serial number, name, mobile phone company add time operation"

For (var iTuno Bandi)

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report