IndexedDB Storage Lib

A lightweight wrapper for IndexedDB with TypeScript support.

Installation

npm install indexeddb-storage-lib

Usage

ES Module

import IndexedDBWrapper from "indexeddb-storage-lib";

async function run() {
  try {
    const db = await IndexedDBWrapper.getInstance("myDatabase", "myStore");

    // Add an item
    const id = await db.addItem({ name: "Test Item" });
    console.log("Added item with id:", id);

    // Get all items
    const items = await db.getAllItems();
    console.log("All items:", items);
  } catch (error) {
    console.error("Error:", error);
  }
}

run();

CommonJS

const IndexedDBWrapper = require("indexeddb-storage-lib");

async function run() {
  try {
    const db = await IndexedDBWrapper.getInstance("myDatabase", "myStore");

    // Add an item
    const id = await db.addItem({ name: "Test Item" });
    console.log("Added item with id:", id);

    // Get all items
    const items = await db.getAllItems();
    console.log("All items:", items);
  } catch (error) {
    console.error("Error:", error);
  }
}

run();

React

import React, { useEffect, useState } from 'react';
import IndexedDBWrapper from 'indexeddb-storage-lib';

const App = () => {
  const [items, setItems] = useState([]);
  const [dbInstance, setDbInstance] = useState(null);

  // 获取实例并初始化数据库
  const initializeDB = async () => {
    try {
      const db = await IndexedDBWrapper.getInstance('myDatabase', 'myStore');
      setDbInstance(db);
    } catch (error) {
      console.error('Error initializing DB:', error);
    }
  };

  useEffect(() => {
    initializeDB();
  }, []);

  // 添加一个项
  const addItem = async () => {
    try {
      if (dbInstance) {
        const id = await dbInstance.addItem({ name: 'React Test Item' });
        console.log('Added item with id:', id);
      }
    } catch (error) {
      console.error('Error adding item:', error);
    }
  };

  // 获取所有项
  const getAllItems = async () => {
    try {
      if (dbInstance) {
        const allItems = await dbInstance.getAllItems();
        setItems(allItems);
        console.log('All items:', allItems);
      }
    } catch (error) {
      console.error('Error getting items:', error);
    }
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={getAllItems}>Get All Items</button>
      <div>
        {items.length > 0 && (
          <div>
            <h3>All Items:</h3>
            <ul>
              {items.map((item, index) => (
                <li key={index}>{item.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

Vue

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="getAllItems">Get All Items</button>
    <div v-if="items.length">
      <h3>All Items:</h3>
      <ul>
        <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import IndexedDBWrapper from 'indexeddb-storage-lib';

export default {
  setup() {
    const items = ref([]);
    const dbInstance = ref(null);

    // 获取实例并初始化数据库
    const initializeDB = async () => {
      try {
        dbInstance.value = await IndexedDBWrapper.getInstance('myDatabase', 'myStore');
      } catch (error) {
        console.error('Error initializing DB:', error);
      }
    };

    // 添加一个项
    const addItem = async () => {
      try {
        const id = await dbInstance.value.addItem({ name: 'Vue Test Item' });
        console.log('Added item with id:', id);
      } catch (error) {
        console.error('Error adding item:', error);
      }
    };

    // 获取所有项
    const getAllItems = async () => {
      try {
        items.value = await dbInstance.value.getAllItems();
        console.log('All items:', items.value);
      } catch (error) {
        console.error('Error getting items:', error);
      }
    };

    // 初始化数据库
    initializeDB();

    return {
      items,
      addItem,
      getAllItems
    };
  }
};
</script>

API

getInstance(dbName: string, storeName: string, dbVersion?: number): IndexedDBWrapper

Returns a singleton instance of the IndexedDBWrapper.

addItem<T>(item: T): Promise<IDBValidKey>

Adds an item to the store and returns its ID.

getItem<T>(id: IDBValidKey): Promise<T | undefined>

Retrieves an item by ID.

getAllItems<T>(): Promise<T[]>

Retrieves all items in the store.

deleteItem(id: IDBValidKey): Promise<void>

Deletes an item by ID.

License

MIT