Home Web Front-end H5 Tutorial Detailed explanation of HTML5 local database instance

Detailed explanation of HTML5 local database instance

May 12, 2018 pm 02:46 PM

Web SQL Databases of HTML5 (html5 local database) are indeed very tempting. When you find that you can use the same query statement as mysql query to operate the local database, you will find this thing quite interesting. Today, let’s learn about HTML 5’s Web SQL Database API: openDatabase, transaction, executeSql. The Web SQL Database API is not actually part of the HTML5 specification, but a separate specification. It manipulates the client's database through a set of APIs. Mainstream browsers such as Safari, Chrome, Firefox, and Opera already support Web SQL Database. HTML5's Web SQL Databases are indeed very tempting. When you find that you can use the same query statement as a mysql query to operate a local database, you will find this thing quite interesting. Today, let’s learn about HTML 5’s Web SQL Database API.
The following will introduce one by one how to create and open a database, create a table, add data, update data, delete data, and delete a table.
First introduce the three core methods
1. openDatabase: This method uses an existing database or creates a new databaseCreate a databaseObject.
2. Transaction: This method allows us to control transaction submission or rollback according to the situation.
3. executeSql: This method is used to execute real SQL queries.
Step one: Open the connection and create the database

The code is as follows:

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if
 (!dataBase) {
    alert("数据库创建失败!");
} 
else
 {
    alert("数据库创建成功!");
}

Explain the openDatabase method to open an existing database. If the database Doesn't exist, it can also create a database. The meanings of several parameters are:
1, database name.
2. The version number is currently 1.0. Leave it alone and just write it to death.
3, description of the database.
4, set the data size.
5, Callback function (can be omitted).
Create the database when calling for the first time, and then establish the connection.
The created database exists locally, and the path is as follows:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987.
What is created is a sqllite database. You can use SQLiteSpy to open the file and see the data inside. SQLiteSpy is a green software. You can download it from Baidu or the official SQLiteSpy download address: SQLiteSpy.
Step 2: Create a data table

The code is as follows:

this.createTable=function() {  
dataBase.transaction( function(tx) {     
tx.executeSql(        
"create table if not exists stu (id REAL UNIQUE, name TEXT)",         
[],         
function(tx,result){ alert('创建stu表成功'); 
},         
function(tx, error){ alert('创建stu表失败:' + error.message);     
}); 
});
}

Explain,
executeSql function has four parameters, their meanings are:
1) Represents the string of the query, and the SQL language used is SQLite 3.6.19.
2) Insert the string data where the question mark is in the query.
3) Callback function executed when successful. Returns two parameters: tx and the result of execution.
4) A callback function executed when failure occurs. Returns two parameters: tx and failure error message.
Step 3: Perform add, delete, modify and query
1) Add data:

The code is as follows:

this.insert = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "insert  into  stu (id, name) values(?, ?)",
        [id, '徐明祥'],
        function () { alert('添加数据成功'); },
        function (tx, error) { alert('添加数据失败: ' + error.message); 
        } );
    });

2) Query data

The code is as follows:

this.query = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "select  *  from  stu", [],
         function (tx, result) {  //执行成功的回调函数
             //在这里对result 做你想要做的事情吧...........
            },
         function (tx, error) {
            alert('查询失败: ' + error.message);
         } );
      });
}

Explain it
The callback function that executes successfully in the above code has a parameter result.

result: The queried data set. Its data type is SQLResultSet, just like the DataTable in C#.
SQLResultSet is defined as:

The code is as follows:

interface  SQLResultSet {
             readonly  attribute  long  insertId;
             readonly  attribute  long  rowsAffected;
             readonly  attribute  SQLResultSetRow
List
  rows;
             };

The most important property—rows of SQLResultSetRowList type is the "rows" of the data set.
rows has two attributes: length, item.
So, get the value of a certain row and column of the query result: result.rows[i].item[fieldname].

3) Update data

The code is as follows:

this.update = function (id, name) {   
dataBase.transaction(function (tx) {            
tx.executeSql(        
"update  stu  set  name =  ?  where  id= ?",        
[name, id],         
function (tx, result) {         },        
function (tx, error) {            
alert('更新失败: ' + error.message);        
});   
});
}

4)Delete data

The code is as follows:

this.del = function (id) {
     dataBase.transaction(function (tx) {
            tx.executeSql(
        "
delete
  from  stu  where  id= ?",
        [id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('删除失败: ' + error.message);
        });
    });
}

5 )Delete the data table

The code is as follows:

this.dropTable = function () {    
dataBase.transaction(function (tx) {            
tx.executeSql('drop  table  stu');     
});
}

[Related recommendations]

1. Html5 free video tutorial

2. H5 code demonstration for making a timer

3. H5 detailed example of completing multiple image uploads

4. Detailed explanation of H5’s custom attribute data-*

5. Teach you how to implement an H5 micro-scene

The above is the detailed content of Detailed explanation of HTML5 local database instance. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Beginner's Guide to RimWorld: Odyssey
1 months ago By Jack chen
PHP Variable Scope Explained
4 weeks ago By 百草
Tips for Writing PHP Comments
3 weeks ago By 百草
Commenting Out Code in PHP
3 weeks ago By 百草

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1509
276
How to use radio buttons in HTML5? How to use radio buttons in HTML5? Jul 21, 2025 am 01:08 AM

The key to using radio buttons in HTML5 is to understand how they work and correctly organize the code structure. 1. The name attribute of each radio button must be the same to achieve mutually exclusive selection; 2. Use label tags to improve accessibility and click experience; 3. It is recommended to wrap each option in a div or label to enhance structural clarity and style control; 4. Set default selections through the checked attribute; 5. The value value should be concise and meaningful, which is convenient for form submission processing; 6. The style can be customized through CSS, but the function needs to be ensured to be normal. Mastering these key points can effectively avoid common problems and improve the effectiveness of use.

Is the  tag still used in HTML5? Is the tag still used in HTML5? Jul 21, 2025 am 02:47 AM

Yes, it is part of HTML5, but its use has gradually decreased and is controversial. Used to combine the main title with the subtitle so that only the highest level of titles are identified in the document outline; for example, the main title and subtitle can be wrapped in to indicate that they are only auxiliary titles rather than independent chapter titles; however, reasons why they are no longer widely used include: 1. The browser and screen readers are inconsistent support for them, 2. There are simpler alternatives such as using CSS to control styles, 3. The HTML document outline algorithm is not widely supported; despite this, it can still be considered in websites or documents with high semantic requirements; while in most cases, developers tend to use a single, manage styles through CSS and maintain clear title levels.

How to write a basic HTML5 page template? How to write a basic HTML5 page template? Jul 26, 2025 am 07:23 AM

Declare the document as HTML5 to avoid the browser from entering weird mode; 2. Define the root element and specify the language to improve accessibility and SEO; 3. It includes ensuring correct character encoding, implementing responsive design, and setting page title; 4. Place all visible content, optionally add CSS, favicon and JavaScript links; this template is complete and compatible with modern browsers, and is suitable for any new HTML file.

Understanding Server-Sent Events in HTML5 Understanding Server-Sent Events in HTML5 Jul 23, 2025 am 01:21 AM

Server-SentEvents (SSE) is a technology in HTML5 that implements server pushing data to clients in real time, and is suitable for stock market, notification systems and other scenarios. It is based on the HTTP protocol, and remains open after establishing a connection. The server can send updates at any time, supporting automatic reconnection and standard data formats. The front-end receives data by creating an EventSource object and listening to message events. The backend needs to set the correct MIME type (text/event-stream) and keep the connection open and continuously output data stream. When using it, you need to pay attention to cross-domain issues, connection timeouts, browser compatibility and intermediate layer restrictions.

Defining custom vocabularies using HTML5 Schema.org markup. Defining custom vocabularies using HTML5 Schema.org markup. Jul 31, 2025 am 10:50 AM

The Schema.org tag helps search engines understand the structured data format of web page content through semantic tags (such as item scope, item type, itemprop); it can be used to define custom vocabulary, methods include extending existing types or using additionalType to introduce new types; in actual applications, keeping the structure clear, using official attributes first, testing code validity, and ensuring that custom types are accessible; precautions include accepting partial support, avoiding spelling errors, and choosing a suitable format such as JSON-LD.

How does the HTML5 parser handle errors? How does the HTML5 parser handle errors? Aug 02, 2025 am 07:51 AM

HTML5parsershandlemalformedHTMLbyfollowingadeterministicalgorithmtoensureconsistentandrobustrendering.1.Formismatchedorunclosedtags,theparserautomaticallyclosestagsandadjustsnestingbasedoncontext,suchasclosingabeforeaandreopeningitafterward.2.Withimp

What are HTML5 data attributes? What are HTML5 data attributes? Aug 06, 2025 pm 05:39 PM

HTML5dataattributesarecustom,validHTMLattributesusedtostoreextrainformationinelementsforJavaScriptorCSS.1.Theyaredefinedasdata-*attributes,likedata-user-id="123".2.Theyallowembeddingprivate,customdatadirectlyinmarkupwithoutaffectinglayoutor

What is the most misunderstood HTML5 semantic tag? What is the most misunderstood HTML5 semantic tag? Jul 18, 2025 am 03:51 AM

Thetagshouldbeusedtosemanticallygrouprelatedcontentunderaheading.1.Itisintendedforthematicblocksofcontent,similartochaptersinadocument.2.Commonmistakesincludeusingitasalayoutcontainer,omittingheadings,andunnecessarynesting.3.Useforgroupedcontent,fors

See all articles