js怎么在本地缓存存入多个数据库

在本地缓存存入多个数据库的方法

在JavaScript中，可以通过多种方式在本地存储数据，包括 LocalStorage、IndexedDB、WebSQL。本地存储的关键方法包括：LocalStorage操作简单、IndexedDB功能强大、WebSQL已被弃用。其中，IndexedDB 是目前最强大和推荐的方式，因为它可以存储复杂的数据结构，并且提供了事务支持和异步操作。接下来，我将详细描述如何使用IndexedDB在本地缓存中存储多个数据库。

一、IndexedDB概述

IndexedDB是一个低级API，用于在用户的浏览器中存储大量的结构化数据。它允许你创建多个数据库，每个数据库包含多个对象存储（类似于表格）。它是事务性的，并且支持异步操作，确保数据一致性和应用性能。

1. IndexedDB的优势

存储复杂数据：支持存储对象、数组等复杂数据结构。
事务支持：确保数据操作的一致性。
异步操作：不阻塞主线程，提升应用性能。
大容量存储：可以存储大量数据，超出LocalStorage的5MB限制。

二、创建和打开数据库

在IndexedDB中，数据库操作是异步的。首先需要打开（或创建）一个数据库。通过 indexedDB.open() 方法可以实现。

function openDatabase(dbName, version) {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, version);
        request.onerror = (event) => {
            reject(`Database error: ${event.target.errorCode}`);
        };
        request.onsuccess = (event) => {
            resolve(event.target.result);
        };
        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            // 创建对象存储（表格）
            if (!db.objectStoreNames.contains('store1')) {
                db.createObjectStore('store1', { keyPath: 'id' });
            }
            if (!db.objectStoreNames.contains('store2')) {
                db.createObjectStore('store2', { keyPath: 'id' });
            }
        };
    });
}

三、添加数据到数据库

在IndexedDB中，所有的数据操作都需要在事务中进行。通过 transaction 方法可以创建一个事务，并通过 objectStore 方法获取对象存储。

function addData(db, storeName, data) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], 'readwrite');
        const objectStore = transaction.objectStore(storeName);
        const request = objectStore.add(data);
        request.onsuccess = () => {
            resolve('Data added successfully');
        };
        request.onerror = (event) => {
            reject(`Add data error: ${event.target.errorCode}`);
        };
    });
}
// 示例数据
const data1 = { id: 1, name: 'John Doe', age: 30 };
const data2 = { id: 2, name: 'Jane Doe', age: 25 };
openDatabase('myDatabase', 1).then(db => {
    addData(db, 'store1', data1).then(console.log).catch(console.error);
    addData(db, 'store2', data2).then(console.log).catch(console.error);
});

四、读取数据

读取数据同样需要在事务中进行。通过 get 方法可以获取单条记录，通过 getAll 方法可以获取所有记录。

function getData(db, storeName, key) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], 'readonly');
        const objectStore = transaction.objectStore(storeName);
        const request = objectStore.get(key);
        request.onsuccess = (event) => {
            resolve(event.target.result);
        };
        request.onerror = (event) => {
            reject(`Get data error: ${event.target.errorCode}`);
        };
    });
}
openDatabase('myDatabase', 1).then(db => {
    getData(db, 'store1', 1).then(console.log).catch(console.error);
});

五、更新数据

更新数据也是通过事务进行的，可以使用 put 方法。

function updateData(db, storeName, data) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], 'readwrite');
        const objectStore = transaction.objectStore(storeName);
        const request = objectStore.put(data);
        request.onsuccess = () => {
            resolve('Data updated successfully');
        };
        request.onerror = (event) => {
            reject(`Update data error: ${event.target.errorCode}`);
        };
    });
}
const updatedData = { id: 1, name: 'John Doe', age: 31 };
openDatabase('myDatabase', 1).then(db => {
    updateData(db, 'store1', updatedData).then(console.log).catch(console.error);
});

六、删除数据

删除数据使用 delete 方法。

function deleteData(db, storeName, key) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], 'readwrite');
        const objectStore = transaction.objectStore(storeName);
        const request = objectStore.delete(key);
        request.onsuccess = () => {
            resolve('Data deleted successfully');
        };
        request.onerror = (event) => {
            reject(`Delete data error: ${event.target.errorCode}`);
        };
    });
}
openDatabase('myDatabase', 1).then(db => {
    deleteData(db, 'store1', 1).then(console.log).catch(console.error);
});

七、事务的使用

在IndexedDB中，事务是确保数据一致性的重要机制。事务可以是只读的或读写的。所有的读写操作都必须在事务中进行。

function performTransaction(db, storeName, operations) {
    return new Promise((resolve, reject) => {
        const transaction = db.transaction([storeName], 'readwrite');
        const objectStore = transaction.objectStore(storeName);
        transaction.oncomplete = () => {
            resolve('Transaction completed successfully');
        };
        transaction.onerror = (event) => {
            reject(`Transaction error: ${event.target.errorCode}`);
        };
        operations(objectStore);
    });
}
openDatabase('myDatabase', 1).then(db => {
    performTransaction(db, 'store1', (store) => {
        store.add({ id: 3, name: 'Alice Doe', age: 28 });
        store.add({ id: 4, name: 'Bob Doe', age: 35 });
    }).then(console.log).catch(console.error);
});

八、总结

在JavaScript中使用IndexedDB存储多个数据库是一个强大且灵活的选择。IndexedDB提供了存储复杂数据结构、事务支持、异步操作等多种优势，确保数据的一致性和应用的高性能。通过掌握打开数据库、添加数据、读取数据、更新数据、删除数据以及使用事务等基本操作，你可以轻松地在本地缓存存入多个数据库，并有效管理和操作这些数据。

推荐的项目团队管理系统：研发项目管理系统PingCode，和通用项目协作软件Worktile。这些系统可以帮助你更好地管理和协作项目，提高团队的工作效率。