The Web SQL database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of APIs that use SQL to manipulate the client database.
If you are a Web back-end programmer, it should be easy to understand SQL operations.
Web SQL Database works in the latest version of Safari, Chrome, and Opera browsers.
Core approachThe following are the three core methods defined in the specification:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Javascript</title>6 <styletype= "Text/css">7 8 </style>9 </Head>Ten <Body> One <DivID= "status"name= "status">Status information</Div> A </Body> - </HTML> - <Scripttype= "Text/javascript"> the /* - *opendatabase: Create a Database object using an existing database or a new database - five parameters corresponding to the *opendatabase method description: 1 Database Name 2 version number 3 Description text 4 database size 5 Create callback (create callback will be called after database creation) - * */ + varDB=OpenDatabase ('MyDB', '1.0', 'Test DB', 2 * 1024x768 * 1024x768); - varmsg; + /* A * Transaction This method allows us to control a thing and execute commits or rollbacks based on this situation. at * ExecuteSQL This method is used to execute the actual SQL query. - * After statement execution, a table named logs is created in the MyDB database. - * */ - Db.transaction (function(TX) { - Tx.executesql ('CREATE TABLE IF not EXISTS LOGS1 (id unique, log)'); - Tx.executesql ('INSERT into LOGS1 (ID, log) VALUES (1, "Nihao1")');//Inserting Data in Tx.executesql ('INSERT into LOGS1 (ID, log) VALUES (2, "Nihao2")');//Inserting Data - msg= 'The <p> data sheet has been created and two data has been inserted. </p>'; to Document.queryselector ('#status'). InnerHTML=msg; + }); - the /* * * How to read data that already exists in the database $ * */Panax Notoginseng Db.transaction (function(TX) { - Tx.executesql ('SELECT * from LOGS1', [], function(TX, results) { the varLen=results.rows.length, I; + msg= "<p> Query record number:" +Len+ "</p>"; A Document.queryselector ('#status'). InnerHTML+=msg; the + for(i= 0; I<Len; I++){ - msg= "<p><b>" +Results.rows.item (i). Log+ "</b></p>"; $ Document.queryselector ('#status'). InnerHTML+=msg; $ } - }, NULL); - }); the </Script>
Effect:
HTML5 Web SQL Database Summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
