正文

轻松掌握：用JavaScript构建HTML5本地数据库全攻略

/0 浏览量
1015

在Web开发中，本地数据库的应用越来越广泛。HTML5提供了Web SQL Database和IndexedDB两种本地数据库解决方案。本文将详细介绍如何使用JavaScript构建HTML5本地数据库，让你轻松掌握这一技能。

一、Web SQL Database

Web SQL Database是基于SQL的轻量级数据库，它允许Web应用程序在用户的浏览器中存储数据。以下是使用Web SQL Database的基本步骤：

1. 创建数据库

var db = openDatabase('mydb', '1.0', 'My first database', 2 * 1024 * 1024);

2. 创建表

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS mytable (id INTEGER PRIMARY KEY, name TEXT)');
});

3. 插入数据

db.transaction(function(tx) {
    tx.executeSql('INSERT INTO mytable (name) VALUES (?)', ['John']);
});

4. 查询数据

db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM mytable', [], function(tx, rs) {
        var len = rs.rows.length;
        for (var i = 0; i < len; i++) {
            console.log(rs.rows.item(i).name);
        }
    });
});

5. 更新数据

db.transaction(function(tx) {
    tx.executeSql('UPDATE mytable SET name = ? WHERE id = ?', ['Alice', 1]);
});

6. 删除数据

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM mytable WHERE id = ?', [1]);
});

二、IndexedDB

IndexedDB是一个低级API，用于客户端存储大量结构化数据。以下是使用IndexedDB的基本步骤：

1. 打开数据库

var request = indexedDB.open('mydb', 1);
request.onerror = function(e) {
    console.log('Database error: ' + e.target.errorCode);
};
request.onsuccess = function(e) {
    db = request.result;
};

2. 创建对象存储

db.createObjectStore('mytable', {keyPath: 'id'});

3. 插入数据

var transaction = db.transaction(['mytable'], 'readwrite');
var store = transaction.objectStore('mytable');
store.add({id: 1, name: 'John'});

4. 查询数据

var transaction = db.transaction(['mytable'], 'readonly');
var store = transaction.objectStore('mytable');
var request = store.get(1);
request.onsuccess = function(e) {
    console.log(request.result.name);
};

5. 更新数据

var transaction = db.transaction(['mytable'], 'readwrite');
var store = transaction.objectStore('mytable');
var request = store.put({id: 1, name: 'Alice'});

6. 删除数据

var transaction = db.transaction(['mytable'], 'readwrite');
var store = transaction.objectStore('mytable');
var request = store.delete(1);

三、总结

本文介绍了使用JavaScript构建HTML5本地数据库的方法，包括Web SQL Database和IndexedDB。通过学习本文，你可以轻松掌握这两种数据库的使用方法，为你的Web开发工作提供便利。

-- 展开阅读全文 --