HTML5怎么使用IndexedDB_HTML5数据库操作教程

IndexedDB是html5中用于浏览器持久化存储大量结构化数据的低级API,支持事务操作,适用于需要离线功能的复杂应用。通过indexedDB.open()方法可创建或打开数据库,若数据库版本更新或首次创建会触发onupgradeneeded事件,在此可定义对象仓库(Object store)和索引。例如创建“users”表并设置主键“id”,添加name和email索引。数据操作需在事务中进行:使用transaction()开启读写事务,调用add()插入数据,注意主键冲突;通过get()按主键查询,或利用索引index()实现条件查找;更新用put()覆盖原记录,删除用delete()移除指定主键数据;还可通过openCursor()遍历所有数据。所有操作均为异步,依赖事件回调处理结果,建议封装promise以提升代码可维护性。

HTML5怎么使用IndexedDB_HTML5数据库操作教程

html5中的IndexedDB是一种在用户浏览器中存储大量结构化数据的低级API,适合处理需要离线使用的复杂应用。它支持事务型操作,能高效地对数据进行增删改查。下面介绍如何使用IndexedDB进行基本的数据库操作。

创建或打开数据库

使用indexedDB.open()方法可以打开一个已有数据库,若不存在则会创建一个新的。

示例代码:

let request = indexedDB.open(“MyDatabase”, 1);
request.onerror = function(Event) {
  console.log(“无法打开数据库”);
};
request.onsuccess = function(event) {
  db = event.target.result;
  console.log(“数据库打开成功”);
};

首次创建时,会触发onupgradeneeded事件,在该事件中定义数据表(object store)和索引。

立即学习前端免费学习笔记(深入)”;

例如:

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore(“users”, { keyPath: “id” });
  objectStore.createIndex(“name”, “name”, { unique: false });
  objectStore.createIndex(“email”, “email”, { unique: true });
};

这里创建了一个名为“users”的对象仓库,主键为“id”,并添加了两个索引。

添加数据(新增记录)

插入数据需在事务中进行。先开启一个读写事务,再获取对象仓库,调用add()方法。

示例:

function addUser(db, user) {
  let transaction = db.transaction([“users”], “readwrite”);
  let store = transaction.objectStore(“users”);
  let request = store.add(user);
  request.onsuccess = function() {
    console.log(“用户添加成功”);
  };
  request.onerror = function() {
    console.log(“添加失败,可能主键冲突”);
  };
}

调用方式:addUser(db, {id: 1, name: “张三”, email: “zhang@example.com”})

读取数据(查询记录)

通过主键读取单条数据:

function getUserById(db, id) {
  let transaction = db.transaction([“users”]);
  let store = transaction.objectStore(“users”);
  let request = store.get(id);
  request.onsuccess = function() {
    if (request.result) {
      console.log(“找到用户:”, request.result);
    } else {
      console.log(“未找到用户”);
    }
  };
}

使用索引查询:

let index = store.index(“name”);
index.get(“张三”).onsuccess = function(event) {
  console.log(“通过姓名查到:”, event.target.result);
};

更新和删除数据

更新一条记录使用put()方法,会根据主键覆盖原有数据:

let transaction = db.transaction([“users”], “readwrite”);
let store = transaction.objectStore(“users”);
store.put({id: 1, name: “李四”, email: “li@example.com”});

删除数据使用delete()方法:

store.delete(1); // 删除主键为1的记录

也可通过游标遍历所有数据:

let cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log(“遍历:”, cursor.value);
    cursor.continue();
  }
};

基本上就这些。掌握这些基础操作后,就能在前端实现本地持久化存储。注意所有操作都是异步的,需通过事件回调处理结果。不复杂但容易忽略错误处理和事务边界。实际开发中建议封装成Promise风格更便于使用。

暂无评论

发送评论 编辑评论


				
上一篇
下一篇
text=ZqhQzanResources