HTML5のWeb SQL-CSDN博客

本文链接：https://blog.csdn.net/DY2019/article/details/50658700

HTML5のWeb SQL

Web SQL简述

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

方法	概述
openDatabase	使用现在数据库或者新建数据库对象
transaction	控制事务
executeSql	执行CRUD操作

操作详解

以下是三个核心方法详解：

openDatabase(dbName, version, description, size, callback)

dbName：数据库名称

version：版本号

description：描述信息

size：大小

callback：回调函数

transaction(callback(tx))

callback：回调函数

executeSql(sql, [parameters, callback(tx, results), null])

sql：SQL语句字符串

parameters：参数数组

callback：回调函数

实例回放

通过按钮控制SQL执行，示例demo如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <noscript>Your browser does not support JavaScript pluin</noscript>
    <script type="text/javascript">
        var db = openDatabase('webstorage', '1.0', 'The web storage', 2 * 1024);
        var message = "";

        function createTable() {
            var createSql = 'CREATE TABLE IF NOT EXISTS LOGS(id unique, log)';
            db.transaction(function(tx) {
                tx.executeSql(createSql);
                message = "Create database/table successfully.";
                document.querySelector("#detail").innerHTML = message;
            });
        }

        function insertData() {
            var insertsql = 'INSERT INTO LOGS(id, log) VALUES(?, ?)';
            var id = 1;
            var log = "imooc";
            db.transaction(function(tx) {
                tx.executeSql(insertsql, [id, log]);
                tx.executeSql(insertsql, [id + 1, log]);
                message = "Insert data successfully.";
                document.querySelector("#detail").innerHTML = message;
            });
        }

        function deleteData() {
            var deleteSql = 'DELETE FROM LOGS WHERE id = ?';
            var id = 1;
            db.transaction(function(tx) {
                tx.executeSql(deleteSql, [id]);
                message = "Delete data successfully.";
                document.querySelector("#detail").innerHTML = message;
            });
        }

        function updateData() {
            var updateSql = 'UPDATE LOGS SET log = "hacker" WHERE id = ?';
            var id = 1;
            db.transaction(function(tx) {
                tx.executeSql(updateSql, [id]);
                message = "Update data successfully.";
                document.querySelector("#detail").innerHTML = message;
            });
        }

        function selectData() {
            var selectSql = 'SELECT id, log FROM LOGS WHERE id > ?';
            var id = 1;
            db.transaction(function(tx) {
                tx.executeSql(selectSql, [id], function(tx, results) {
                    var length = results.rows.length;
                    message = "Select rows is " + length + ".<br>";
                    document.querySelector("#detail").innerHTML += message;

                    for (var i = 0; i < length; i++) {
                        message = results.rows.item(i).id + ", " + results.rows.item(i).log + "<br>";
                        document.querySelector("#detail").innerHTML += message;
                    }
                }, null);
            });
        }
    </script>
    <style type="text/css">
        #status {
            width: 600px;
            height: 200px;
            border:#CCDD66 1px solid;
            margin:0 auto;
        }

        #btns {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="status">
        <h3>status</h3>
        <span id="detail"></span>
    </div>
    <div id="btns">
        <button type="button" onclick="createTable()">create Table</button>&nbsp;
        <button type="button" onclick="insertData()">insert Data</button>&nbsp;
        <button type="button" onclick="deleteData()">delete Data</button>&nbsp;
        <button type="button" onclick="updateData()">update Data</button>&nbsp;
        <button type="button" onclick="selectData()">select Data</button>
    </div>
</body>
</html>