HTML5 本地数据库及应用

天涯学馆2024-05-20 17:32

HTML5本地数据库及应用

目录

WebSQL

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

数据库创建与打开

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

js 复制代码 
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 语句和参数数组（如果有），以及两个回调函数：一个用于处理查询结果，另一个用于处理执行错误。

js 复制代码 
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);
  });
});

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

js 复制代码 
// 插入数据
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 对象，用于后续的数据库操作。

js 复制代码 
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() 在键值已存在时会抛出错误。

js 复制代码 
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() 等方法进行查询。

js 复制代码 
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() 方法。与插入数据类似，这些操作应在事务上下文中进行。

js 复制代码 
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() 方法获取索引对象，然后调用索引对象的查询方法。

js 复制代码 
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);
};
相关推荐
Wang's Blog几秒前
Redis: 集群环境搭建，集群状态检查，分析主从日志，查看集群信息
数据库·redis
容器( ु⁎ᴗ_ᴗ⁎)ु.｡oO21 分钟前
MySQL事务
数据库·mysql
zqx_723 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己40 分钟前
javaScript基础（8个案例+代码+效果图）
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河2 小时前
CSS总结
前端·css
cyt涛2 小时前
MyBatis 学习总结
数据库·sql·学习·mysql·mybatis·jdbc·lombok
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具，还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑