html5如何设置数据库

在HTML5中,要设置数据库，我们通常会使用Web SQL Database或者IndexedDB，下面我将详细为大家介绍如何在HTML5中设置这两种数据库。

Web SQL Database

Web SQL Database是HTML5中的一个重要组成部分，它允许我们在网页上创建、访问和操作数据库，Web SQL Database仅支持SQLite数据库，以下是如何在HTML5中设置Web SQL Database的步骤：

检查浏览器支持情况

在使用Web SQL Database之前，我们需要先检查当前浏览器是否支持它，可以通过以下代码进行检测：

Markup

<script>
    if (!window.openDatabase) {
        alert('您的浏览器不支持Web SQL Database');
    }
</script>

创建数据库

html5如何设置数据库

创建数据库非常简单,使用openDatabase方法即可，以下是创建数据库的代码示例：

Markup

<script>
    var db = openDatabase('mydb', '1.0', 'My Database', 2 * 1024 * 1024);
</script>

openDatabase方法的参数分别为：数据库名称、版本号、数据库描述和数据库大小（单位为字节）。

执行数据库操作

创建数据库后,我们可以使用transaction方法来执行数据库操作，transaction方法接受两个参数：一个用于执行操作的回调函数和一个用于处理错误的回调函数，以下是示例代码：

Markup

<script>
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS test (id unique, log)');
        tx.executeSql('INSERT INTO test (id, log) VALUES (?, ?)', [e.id, e.log]);
    }, function (error) {
        alert('事务处理失败: ' + error.message);
    });
</script>

查询数据库

查询数据库同样使用transaction方法,以下是示例代码：

Markup

<script>
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM test', [], function (tx, results) {
            for (var i = 0; i < results.rows.length; i++) {
                // 处理查询结果
            }
        });
    });
</script>

以下是对Web SQL Database的详细设置，接下来看第二种数据库。

IndexedDB

IndexedDB是一种低级API,用于客户端存储大量结构化数据，以下是设置IndexedDB的步骤：

打开数据库

要使用IndexedDB,首先需要使用indexedDB.open()方法打开数据库，以下是示例代码：

Markup

<script>
    var openRequest = indexedDB.open('mydb', 1);
</script>

'mydb'是数据库名称，1是数据库版本号。

创建对象存储空间

在数据库打开后,我们需要创建对象存储空间（Object Store），这可以在upgradeneeded事件中完成，以下是示例代码：

Markup

<script>
    openRequest.onupgradeneeded = function (e) {
        var db = e.target.result;
        if (!db.objectStoreNames.contains('test')) {
            db.createObjectStore('test', { keyPath: 'id' });
        }
    };
</script>

添加数据

向IndexedDB添加数据需要使用事务,以下是示例代码：

Markup

<script>
    var db;
    openRequest.onsuccess = function (e) {
        db = e.target.result;
        var transaction = db.transaction(['test'], 'readwrite');
        var store = transaction.objectStore('test');
        var data = { id: 1, name: 'test' };
        var addRequest = store.add(data);
        addRequest.onsuccess = function (e) {
            // 添加数据成功
        };
    };
</script>

查询数据

查询IndexedDB中的数据同样需要使用事务,以下是示例代码：

Markup

<script>
    var db;
    openRequest.onsuccess = function (e) {
        db = e.target.result;
        var transaction = db.transaction(['test'], 'readonly');
        var store = transaction.objectStore('test');
        var getRequest = store.get(1);
        getRequest.onsuccess = function (e) {
            // 处理查询结果
        };
    };
</script>