In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
I used to use GridView and Acti to do paging.
© 2024 shulou.com SLNews company. All rights reserved.