HTML5深入學習之 WebSQL 數據庫

概述

　　WebSQL 並不是 HTML5規范的一部分，而是一個獨立的規范，它可以用來做一些離線應用

核心API

• openDatabase() => 用來打開或創建數據庫（沒有時則創建，有則打開）
• transaction()　　=> 這個方法可以控制一個或多個事務，以及基於這種情況提交或者回滾
• executeSql()       =>用於執行實際的 SQl 查詢

判斷瀏覽器是否支持該項功能

　　這個功能可以在最新版的 chrome, Safari 和 Opera

　　

if (window.openDatabase) {
    // 操作 web SQL        
} else {
     alert('當前瀏覽器不支持 webSQL !!!');
}

打開數據庫

　　　　　　　/**
             * 打開或創建數據庫
             * @param1  數據庫名稱
             * @param2  版本號
             * @param3  描述
             * @param4  數據庫大小
             * @param5  回調函數
            */
            var database = openDatabase('stu', '1.0', '學生表', 1024*1024, function () {});

開啟一個事務

            // 開啟事務
            database.transaction(function (sql) {
               // 在這里操作數據庫的增刪該查
            });    

新建表格

                sql.executeSql(
                    'create table duxiu(id int, name text)',
                    [],
                    function () {
                        alert('創建成功');
                    },
                    function () {
                        alert('創建失敗');
                    }
                );

插入一條數據

                sql.executeSql(
                    // ? => 占位符
                    'insert into duxiu (id, name) values (?, ?)',
                    [2, '張三'],
                    function () {
                        alert('插入一條數據成功');
                    },
                    function () {
                        alert('插入一條數據失敗');
                    }
                );

修改數據

                sql.executeSql(
                    'update duxiu set name = ?, id = ? where rowid = ?',
                    ['王五', 3, 3],
                    function () {
                        alert('修改成功');
                    },
                    function () {
                        alert('修改失敗');
                    }
                );

查找數據

　　我這里是將數據查找出來並且顯示到了表格中

　　

                sql.executeSql(
                    'select * from duxiu',
                    [],
                    function (sql, res) {
                        // console.log(res);
                        var data = res.rows;
                        console.log(data);
                        // console.log(data.length);
                        var table = document.createElement('table');
                        document.querySelector('div').appendChild(table);
                        for (var i = 0; i < data.length; i++) { 
                            var tr = document.createElement('tr');
                            table.appendChild(tr);
                            tr.innerHTML = '<td>' + data[i].id + '</td>';
                            tr.innerHTML += '<td>' + data[i].name + '</td>';
                        }
                        alert('查找成功');
                    },
                    function () {
                        alert('查找失敗');
                    }
                );

刪除數據

                sql.executeSql(
                    'delete from duxiu where id = ?',
                    [1],        // 參數
                    function () {
                        alert('刪除數據成功');
                    },
                    function () {
                        alert('刪除數據失敗');
                    }
                );

刪除表格

                sql.executeSql(
                    'drop table duxiu',
                    [],
                    function () {
                        alert('刪除表成功');
                    },
                    function () {
                        alert('刪除表失敗');
                    }
                );

　　那么，是不是每個人都想過有沒有刪除數據庫的方法呢? 反正我是想了並且去查了，答案是  沒有！！！！！！！！