HTML5 detailed introduction to Web SQL database-H5 Tutorial-php.cn

HTML5 detailed introduction to Web SQL database

黄舟

Release： 2017-07-18 14:02:37

Original

2263 people have browsed it

The Web SQL Database API is not part of the HTML5 specification, but it is an independent specification that introduces a set of APIs for using SQL to operate client databases.

Core method

OpenDatabase-Create a database object using an existing database or a new database

Transaction-Be able to control a thing , and perform commit or rollback based on this situation

executeSql-Execute the actual SQL statement

Open the database

//用openDatabase()方法打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库
var db = openDatabase(&#39;mydb&#39;, &#39;1.0&#39;, &#39;Test DB&#39;, 2 * 1024 * 1024);

Copy after login

The description of the five parameters corresponding to the openDatabase() method:

Database name
Version number
Description text
Database size (bytes)
Create callback (optional)

The fifth parameter, the creation callback will be called after the database is created.

Create table

var db = openDatabase(&#39;mydb&#39;, &#39;1.0&#39;, &#39;Test DB&#39;, 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql(&#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)&#39;);
});

Copy after login

Insert data

var db = openDatabase(&#39;mydb&#39;, &#39;1.0&#39;, &#39;Test DB&#39;, 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql(&#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)&#39;);
   tx.executeSql(&#39;INSERT INTO LOGS (id, log) VALUES (1, "博客园")&#39;);
   tx.executeSql(&#39;INSERT INTO LOGS (id, log) VALUES (2, "www.cnblogs.com")&#39;);
});

Copy after login

You can also use dynamic values to insert data

//e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"
var db = openDatabase(&#39;mydb&#39;, &#39;1.0&#39;, &#39;Test DB&#39;, 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql(&#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)&#39;);
  tx.executeSql(&#39;INSERT INTO LOGS (id,log) VALUES (?, ?)&#39;, [e_id, e_log]);
});

Copy after login

Read data

var db = openDatabase(&#39;mydb&#39;, &#39;1.0&#39;, &#39;Test DB&#39;, 2 * 1024 * 1024);
 
db.transaction(function (tx) {
   tx.executeSql(&#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)&#39;);
   tx.executeSql(&#39;INSERT INTO LOGS (id, log) VALUES (1, "博客园")&#39;);
   tx.executeSql(&#39;INSERT INTO LOGS (id, log) VALUES (2, "www.cnblogs.com")&#39;);
});
 
db.transaction(function (tx) {
   tx.executeSql(&#39;SELECT * FROM LOGS&#39;, [], function (tx, results) {
      var len = results.rows.length;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector(&#39;#status&#39;).innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
          msg = "<p><b>" + results.rows[i].log + "</b></p>";
      }
    
   }, null);
});

Copy after login

Delete records

db.transaction(function (tx) {
    tx.executeSql(&#39;DELETE FROM LOGS  WHERE id=1&#39;);
});

Copy after login

Deleting data can also be dynamic

db.transaction(function(tx) {
    tx.executeSql(&#39;DELETE FROM LOGS WHERE id=?&#39;, [id]);
});

Copy after login

Update record

tx.executeSql("UPDATE CC SET logname=&#39;www.baidu.com&#39; WHERE id=2");

Copy after login

Update data can also be dynamic

tx.executeSql("UPDATE CC SET logname=&#39;www.baidu.com&#39; WHERE id=?", [id]);

Copy after login

Note : Delete and modify cannot be placed in the same executeSql as the table creation statement. It is best to write them separately

The following is the built database

HTML5-Web SQL数据库0

The above is the detailed content of HTML5 detailed introduction to Web SQL database. For more information, please follow other related articles on the PHP Chinese website!