HTML5 本地数据库及应用

码农世界 2024-05-24 前端 70 次浏览 0个评论

HTML5本地数据库及应用

WebSQL

WebSQL 是 HTML5 规范中提出的一种基于 SQL 的客户端数据库存储技术，允许在浏览器端创建和操作关系型数据库。尽管 WebSQL 曾被纳入 HTML5 草案，但由于种种原因（如标准化进程停滞、缺乏跨浏览器支持等），它并未成为正式的 W3C 标准，且已被主流浏览器厂商弃用。目前，推荐使用 IndexedDB 作为浏览器端的数据库解决方案.

数据库创建与打开

使用 window.openDatabase() 函数创建或打开一个 WebSQL 数据库：

let db = null;
try {
  db = openDatabase('myDatabase', '1.0', 'My Database Description', 2 * 1024 * 1024); // 最后一个参数是数据库大小限制，单位为字节
} catch (err) {
  console.error('Error creating/opening database:', err);
}

执行SQL

WebSQL 提供 transaction() 方法来开启一个事务，并在其回调函数中执行 SQL 查询。查询通过 executeSql() 方法执行，该方法接受 SQL 语句和参数数组（如果有），以及两个回调函数：一个用于处理查询结果，另一个用于处理执行错误。

db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)', [], function(tx, result) {
    console.log('Table "users" created or already exists.');
  }, function(tx, error) {
    console.error('Error creating table:', error);
  });
});

插入、查询、更新、删除数据

// 插入数据
db.transaction(function(tx) {
  tx.executeSql('INSERT INTO users (name, email) VALUES (?, ?)', ['John Doe', 'john.doe@example.com'], function(tx, result) {
    console.log('User inserted successfully:', result.insertId);
  }, function(tx, error) {
    console.error('Error inserting user:', error);
  });
});
// 查询数据
db.transaction(function(tx) {
  tx.executeSql('SELECT * FROM users WHERE name = ?', ['John Doe'], function(tx, result) {
    for (let i = 0; i < result.rows.length; i++) {
      const row = result.rows.item(i);
      console.log('User:', row.id, row.name, row.email);
    }
  }, function(tx, error) {
    console.error('Error querying users:', error);
  });
});
// 更新数据
db.transaction(function(tx) {
  tx.executeSql('UPDATE users SET email = ? WHERE id = ?', ['new.email@example.com', 1], function(tx, result) {
    console.log('User updated successfully:', result.rowsAffected);
  }, function(tx, error) {
    console.error('Error updating user:', error);
  });
});
// 删除数据
db.transaction(function(tx) {
  tx.executeSql('DELETE FROM users WHERE id = ?', [1], function(tx, result) {
    console.log('User deleted successfully:', result.rowsAffected);
  }, function(tx, error) {
    console.error('Error deleting user:', error);
  });
});

事务处理

WebSQL 中的所有操作都必须在一个事务（Transaction）中进行。事务确保一组操作要么全部成功，要么全部失败（回滚）。上面的例子中，每个操作都已经封装在 transaction() 方法提供的回调函数中。

限制与弃用

尽管 WebSQL 为浏览器端的离线存储提供了关系型数据库的便利，但由于以下原因，它并未成为广泛接受的标准：

标准化停滞：WebSQL 的标准化工作在 W3C 停滞不前，导致其未能成为正式的 HTML5 标准。
跨浏览器支持问题：只有 Safari、Chrome 和 Opera 浏览器曾提供对 WebSQL 的支持。Firefox、IE/Edge 从未实现该技术。

替代技术出现：IndexedDB，一种更灵活、更适合现代 web 应用的键值对存储机制，逐渐成为浏览器端数据库的首选方案。

IndexDB

IndexedDB用于在浏览器端存储大量结构化数据。与传统的 cookie、localStorage、sessionStorage 等基于字符串键值对的存储方式不同，IndexedDB 允许存储复杂的对象（包括二进制数据），并提供了索引、查询和事务处理等功能，使其更适合于构建复杂的离线应用和丰富的 web 客户端体验。

打开数据库

使用 indexedDB.open() 方法打开或创建数据库。该方法接受数据库名称和版本号作为参数，并返回一个 IDBRequest 对象。在 onsuccess 事件处理器中，可以访问到 IDBDatabase 对象，用于后续的数据库操作。

let db;
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
  console.error('Error opening IndexedDB:', event.target.error);
};
request.onsuccess = function(event) {
  db = event.target.result;
  console.log('Database opened successfully.');
};
request.onupgradeneeded = function(event) {
  // 如果数据库版本升级或首次创建，需要在此处创建或修改对象商店（Object Store）
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('nameIndex', 'name', { unique: false });
};

创建/修改对象

对象商店是 IndexedDB中存放数据的基本单元，类似于关系型数据库中的表。在 onupgradeneeded事件处理器中，可以使用createObjectStore()方法创建新的对象商店，或者通过deleteObjectStore()方法删除已有的对象商店。同时，可以为对象商店创建索引，以便进行高效查询。

插入数据

插入数据需先获取事务（Transaction），然后在事务上下文中使用 put() 或 add() 方法将数据写入对象商店。put()会覆盖已有键值的数据，而 add() 在键值已存在时会抛出错误。

const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const newUser = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};
objectStore.add(newUser).onsuccess = function(event) {
  console.log('User added successfully:', newUser);
};
transaction.oncomplete = function() {
  console.log('Transaction completed.');
};
transaction.onerror = function(event) {
  console.error('Transaction error:', event.target.error);
};

查询数据

查询数据同样需要获取事务和对象商店，然后使用 get()、getAll()、openCursor() 等方法进行查询。

const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
// 查询单个用户
const request = objectStore.get(1);
request.onsuccess = function(event) {
  const user = event.target.result;
  if (user) {
    console.log('Found user:', user);
  } else {
    console.log('User not found.');
  }
};
// 查询所有用户
const getAllRequest = objectStore.getAll();
getAllRequest.onsuccess = function(event) {
  const allUsers = event.target.result;
  console.log('All users:', allUsers);
};
// 使用游标遍历所有用户
const cursorRequest = objectStore.openCursor();
cursorRequest.onsuccess = function(event) {
  const cursor = event.target.result;
  if (cursor) {
    console.log('User:', cursor.value);
    cursor.continue();
  } else {
    console.log('End of cursor.');
  }
};

更新和删除数据

更新数据使用 put() 方法，删除数据使用 delete() 方法。与插入数据类似，这些操作应在事务上下文中进行。

const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
// 更新用户
const updatedUser = {
  id: 1,
  name: 'John Smith',
  email: 'john.smith@example.com'
};
objectStore.put(updatedUser).onsuccess = function(event) {
  console.log('User updated successfully:', updatedUser);
};
// 删除用户
objectStore.delete(1).onsuccess = function(event) {
  console.log('User deleted successfully.');
};
// 事务处理同插入数据示例

索引优化查询

创建索引后，可以在查询时指定使用索引来加速查找。例如，使用 index() 方法获取索引对象，然后调用索引对象的查询方法。

const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
const nameIndex = objectStore.index('nameIndex');
// 查询所有名为 'John Doe' 的用户
const request = nameIndex.getAll('John Doe');
request.onsuccess = function(event) {
  const usersWithNameJohnDoe = event.target.result;
  console.log('Users named John Doe:', usersWithNameJohnDoe);
};

转载请注明来自码农世界，本文标题：《HTML5 本地数据库及应用》