idb.js 是一个用于简化在浏览器中使用 IndexedDB 的 JavaScript插件-BFW插件库

idb.js 是一个用于简化在浏览器中使用 IndexedDB 的 JavaScript插件

idb.js 是一个用于简化在浏览器中使用 IndexedDB 的 JavaScript 插件。IndexedDB 是一个用于在客户端存储大量结构化数据的低级 API。idb.js 通过提供更简洁的 API 和更好的错误处理来简化 IndexedDB 的使用。

以下是 idb.js 的一些基本用法：

安装

你可以通过 npm 安装 idb.js：

npm install idb

或者直接在 HTML 文件中引入：

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/idb.umd.js"></script>

打开数据库

使用 idb.openDB 方法打开或创建一个数据库：

import { openDB } from 'idb';

const dbPromise = openDB('my-database', 1, {
  upgrade(db) {
    // 创建一个对象存储空间（相当于表）
    if (!db.objectStoreNames.contains('my-store')) {
      db.createObjectStore('my-store', { keyPath: 'id', autoIncrement: true });
    }
  },
});

添加数据

使用 add 方法向对象存储空间添加数据：

async function addData(data) {
  const db = await dbPromise;
  const tx = db.transaction('my-store', 'readwrite');
  const store = tx.objectStore('my-store');
  await store.add(data);
  await tx.done;
}

addData({ name: 'Alice', age: 25 });

获取数据

使用 get 方法从对象存储空间获取数据：

async function getData(id) {
  const db = await dbPromise;
  const tx = db.transaction('my-store', 'readonly');
  const store = tx.objectStore('my-store');
  const data = await store.get(id);
  return data;
}

getData(1).then(data => console.log(data));

更新数据

使用 put 方法更新对象存储空间中的数据：

async function updateData(data) {
  const db = await dbPromise;
  const tx = db.transaction('my-store', 'readwrite');
  const store = tx.objectStore('my-store');
  await store.put(data);
  await tx.done;
}

updateData({ id: 1, name: 'Alice', age: 26 });

删除数据

使用 delete 方法删除对象存储空间中的数据：

async function deleteData(id) {
  const db = await dbPromise;
  const tx = db.transaction('my-store', 'readwrite');
  const store = tx.objectStore('my-store');
  await store.delete(id);
  await tx.done;
}

deleteData(1);

遍历数据

使用 getAll 或 iterate 方法遍历对象存储空间中的数据：

async function getAllData() {
  const db = await dbPromise;
  const tx = db.transaction('my-store', 'readonly');
  const store = tx.objectStore('my-store');
  const data = await store.getAll();
  return data;
}

getAllData().then(data => console.log(data));

关闭数据库

使用 close 方法关闭数据库：

async function closeDatabase() {
  const db = await dbPromise;
  db.close();
}

closeDatabase();

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IndexedDB 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
        }
        #output {
            margin-top: 20px;
            font-size: 1.2em;
            color: #333;
        }
    </style>
</head>
<body>
    <button id="createBtn">创建数据</button>
    <button id="readBtn">读取数据</button>
    <button id="updateBtn">更新数据</button>
    <button id="deleteBtn">删除数据</button>
    <div id="output"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/idb.umd.js"></script>
    <script>
        const dbPromise = idb.openDB('my-database', 1, {
            upgrade(db) {
                if (!db.objectStoreNames.contains('my-store')) {
                    db.createObjectStore('my-store', { keyPath: 'id', autoIncrement: true });
                }
            },
        });

        document.getElementById('createBtn').addEventListener('click', async () => {
            const data = { name: 'Alice', age: 25 };
             const data3 = { name: 'Alice2', age: 256 };
            await addData(data);
             await addData(data3);
            document.getElementById('output').innerText = '数据已创建';
        });

        document.getElementById('readBtn').addEventListener('click', async () => {
            const data = await getData(1);
            document.getElementById('output').innerText = JSON.stringify(data);
        });

        document.getElementById('updateBtn').addEventListener('click', async () => {
            const data = { id: 1, name: 'Alice', age: 26 };
            await updateData(data);
            document.getElementById('output').innerText = '数据已更新';
        });

        document.getElementById('deleteBtn').addEventListener('click', async () => {
            await deleteData(1);
            document.getElementById('output').innerText = '数据已删除';
        });

        async function addData(data) {
            const db = await dbPromise;
            const tx = db.transaction('my-store', 'readwrite');
            const store = tx.objectStore('my-store');
            await store.add(data);
            await tx.done;
        }

        async function getData(id) {
            const db = await dbPromise;
            const tx = db.transaction('my-store', 'readonly');
            const store = tx.objectStore('my-store');
            const data = await store.get(id);
            return data;
        }

        async function updateData(data) {
            const db = await dbPromise;
            const tx = db.transaction('my-store', 'readwrite');
            const store = tx.objectStore('my-store');
            await store.put(data);
            await tx.done;
        }

        async function deleteData(id) {
            const db = await dbPromise;
            const tx = db.transaction('my-store', 'readwrite');
            const store = tx.objectStore('my-store');
            await store.delete(id);
            await tx.done;
        }
    </script>
</body>
</html>