html5 sqlite(Web SQL)

最新推荐文章于 2024-05-24 10:00:18 发布

曹振华

最新推荐文章于 2024-05-24 10:00:18 发布

阅读量5.5k

点赞数 1

分类专栏： html5 文章标签： html5 sqlite

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1）查看Web SQL 数据库

a) Chrome F12

b) Safari Ctrl+Alt+I

代码

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>sqlite</title>
    <script type="text/javascript">
        var db;
        function Onload() {
            db = CreateOrOpenDB('MyTestDB');
        }
        function CreateOrOpenDB(dbname) {//创建或打开一个本地的数据库对象
            var db = openDatabase(dbname, '1.0', '', 2 * 1024 * 1024);
            return db;
        }
        function CreateTable() {//创建表
            db.transaction(function (context) {
                context.executeSql('CREATE TABLE IF NOT EXISTS Student (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT,address TEXT)');
            }, function (error) {
                console.log('创建表失败:[' + error.message + ']');
            }, function () {
                console.log('创建表成功');
            });
        }
        function InsertData() {//插入数据
            db.transaction(function (context) {
                context.executeSql('INSERT INTO Student (name,address) VALUES ("张三","浙江")');
                context.executeSql('INSERT INTO Student (name,address) VALUES ("李四","江苏")');
                context.executeSql('INSERT INTO Student (name,address) VALUES ("王五","上海")');
            }, function (error) {
                console.log('插入数据失败:[' + error.message + ']');
            }, function () {
                console.log('插入数据成功');
            });
        }
        function UpdateData() {//更新数据
            db.transaction(function (context) {
                context.executeSql('UPDATE Student SET address="海南" WHERE id=1');
            }, function (error) {
                console.log('更新数据失败:[' + error.message + ']');
            }, function () {
                console.log('更新数据成功');
            });
        }
        function DeleteData() {//删除数据
            db.transaction(function (context) {
                context.executeSql('DELETE FROM Student WHERE id=1');
            }, function (error) {
                console.log('删除数据失败:[' + error.message + ']');
            }, function () {
                console.log('删除数据成功');
            });
        }
        function SelectData() {//查询数据
            db.transaction(function (context) {
                context.executeSql('SELECT * FROM Student', [], function (context, results) {
                    var items = results.rows;
                    for (i = 0; i < items.length; i++) {
                        var item = items.item(i);
                        alert('{id:"' + item.id + '",name:"' + item.name + '",address:"' + item.address + '"}');
                    }
                });
            }, function (error) {
                console.log('查询数据失败:[' + error.message + ']');
            }, function () {
                console.log('查询数据成功');
            });
        }
        function DropTable() {//删除表
            db.transaction(function (context) {
                context.executeSql('DROP TABLE IF EXISTS Student');
            }, function (error) {
                console.log('删除表失败:[' + error.message + ']');
            }, function () {
                console.log('删除表成功');
            });
        }
    </script>
</head>
<body οnlοad="Onload();">
    <div>
        <table style=" width:100%">
            <tr><td><input type="button" value="创建表" οnclick="CreateTable();" style=" width:100%; height:100px;"></td></tr>
            <tr><td><input type="button" value="插入数据" οnclick="InsertData();" style=" width:100%; height: 100px;"></td></tr>
            <tr><td><input type="button" value="更新数据" οnclick="UpdateData();" style=" width:100%; height: 100px;"></td></tr>
            <tr><td><input type="button" value="删除数据" οnclick="DeleteData();" style=" width:100%; height: 100px;"></td></tr>
            <tr><td><input type="button" value="查询数据" οnclick="SelectData();" style=" width:100%; height: 100px;"></td></tr>
            <tr><td><input type="button" value="删除表" οnclick="DropTable();" style=" width:100%; height: 100px;"></td></tr>
        </table>
    </div>
</body>
</html>