IDB

component.vue

import {IndexedDBRepository, DB} from "../utils/database.ts";
import {onMounted} from "vue";

interface ExampleObj {
  name: string
  files: File[]
}

interface ExampleDB extends DB {
  'my-store': {
    key:number
    value: ExampleObj
  }
}
const files: File[] = [
    new File(['content'], 'file1.txt'),
    new File(['content'], 'file2.txt'),
]
const obj = {
  name: 'Example',
  files
}

onMounted(async () => {
  const dbService = new IndexedDBRepository<ExampleDB, 'my-store', ExampleObj>('db-name-test', 'my-store')

  const obj2 = {
    ...obj
  }
  // await dbService.create(obj2)

  const r = await dbService.read(4)

  console.log(r)

})

database.ts

import {openDB, IDBPDatabase, DBSchema, StoreNames, StoreValue, StoreKey } from 'idb'

export interface DB extends DBSchema {
    [store: string]: {
        key: number,
        value: any
    }
}

export class IndexedDBRepository<T extends DB, K extends StoreNames<T>, V extends StoreValue<T, K>> {
    private dbPromise: Promise<IDBPDatabase<T>>;
    private storeName: K;

    constructor(dbName: string, storeName: K) {
        this.storeName = storeName;
        this.dbPromise = openDB<T>(dbName, 1, {
            upgrade(db) {
                db.createObjectStore(storeName, {
                    keyPath: 'id',
                    autoIncrement: true,
                });
            },
        });
    }

    async create(item: V): Promise<StoreKey<T, K>> {
        const db = await this.dbPromise;
        return await db.add(this.storeName, item);
    }

    async read(id: StoreKey<T, K>): Promise<V | undefined> {
        const db = await this.dbPromise;
        return await db.get(this.storeName, id);
    }

    async update(item: V): Promise<void> {
        const db = await this.dbPromise;
        await db.put(this.storeName, item);
    }

    async delete(id: StoreKey<T, K>): Promise<void> {
        const db = await this.dbPromise;
        await db.delete(this.storeName, id);
    }

    async getAll(): Promise<V[]> {
        const db = await this.dbPromise;
        return await db.getAll(this.storeName);
    }
}