IndexedDB的使用

一、连接IndexedDB

const request = window.indexedDB.open(dataBaseName,version)；

第一个参数：创建的数据库名称
第二个参数：数据库版本号
二、连接IndexedDB的成功、失败、升级事件

onsuccess：当数据库操作成功完成时触发。
onerror：当数据库操作失败时触发。
onupgradeneeded触发条件：
首次创建数据库：当数据库不存在时，首次调用 open() 方法会触发此事件。
版本号更新：当调用 open() 时指定的版本号高于当前数据库版本号时触发

request.onsuccess = (event)=>{
   const db = event.target.result;
}
request.onerror = (event)=>{
  const error = event.target.error;
}
request.onupgradeneeded = (event)=>{
  const db = event.target.result;
  // 判断是否存在当前数据表store1，不存在就创建
  If(!db.objectStoreNames.contains(‘store1’)){
    const store1 = db.createObjectStore(‘store1’,{
      keyPath:’name’,autoIncrement:false
    }) 
  }
  // 判断是否存在当前数据表store2，不存在就创建
  If(!db.objectStoreNames.contains(‘store2’)){
    const store2 = db.createObjectStore(‘store2’,{
      keyPath:’id’,autoIncrement:false
    }) 
  }
}

三、创建事务

const transaction = db.transaction('customers', 'readwrite');// 创建事务作用于‘customers’这个对象存储，并且事务模式为‘readwrite’
const objectStore = transaction.objectStore('customers');// 获取‘customer’这个对象存储，以便在当前事务中进行操作

四、封装

//src/utils/indexedDB.js
export default {
    // 打开数据库
    openDatabase() {
        return new Promise((resolve, reject) => {
          const request = indexedDB.open('DataBaseDemo', 1);
          
          request.onupgradeneeded = (event) => {
            const db = event.target.result;
            // if (!db.objectStoreNames.contains('customers')) {
            //     const customerStore = db.createObjectStore('customers', {
            //     keyPath: 'username',
            //     autoIncrement: false
            // });
            // //   objectStore.createIndex('nameIndex', 'username', { unique: false });
            // //   objectStore.createIndex('ageIndex', 'age', { unique: false });
            // }
            if(!db.objectStoreNames.contains('menus')){
              const menuStore = db.createObjectStore('menus', {
                keyPath: 'username',
                autoIncrement: false
              });
            }
          };
    
          request.onsuccess = (event) => {
            // 保存数据库实例到window对象上，方便全局使用
            window.db = event.target.result;
            resolve(event.target.result);
          };

          request.onerror = (event) => {
            console.error('打开数据库失败:', event.target.error);
            reject(event.target.error);
          };

        });
    },
    // 关闭数据库
    closeDatabase() {
        if (window.db) {
          window.db.close();
          window.db = null;
        }
    },
    // 添加用户数据
    addCustomer(customer) {
      return new Promise((resolve, reject) => {
        const transaction = db.transaction('customers', 'readwrite');
        const objectStore = transaction.objectStore('customers');
  
        const addRequest = objectStore.add(customer);
        addRequest.onsuccess = () => {
          console.log(`数据 ${customer.username} 添加成功`);
          resolve(true);
        };
        addRequest.onerror = (e) => {
          console.error(`数据 ${customer.username} 添加失败:`, e.target.error);
          reject(e.target.error);
        };
  
        transaction.oncomplete = () => {
          console.log('所有数据添加完成');
        //   db.close();
        };
      });
    },
    // 查询用户数据
    queryCustomers(username) {
        return new Promise((resolve, reject) => {
          const transaction = db.transaction('customers', 'readonly');
          const objectStore = transaction.objectStore('customers');
          const request = objectStore.get(username);

          request.onsuccess = (event) => {
            console.log('查询结果:', event);
            resolve(event.target.result);
          }
          request.onerror = (event) => {
            console.error('查询失败:', event.target.error);
            reject(event.target.error);
          }
          transaction.oncomplete = () => {
            // db.close();
          }
        });
    },
    // 添加菜单数据
    addMenu(username,menu) {
      return new Promise((resolve, reject) => {
        const transaction = db.transaction('menus', 'readwrite');
        const objectStore = transaction.objectStore('menus');
        const isExist = objectStore.get(username);
        console.log('isExist:',isExist);
        isExist.onsuccess = (event) => {
          if(event.target.result){
            resolve(true);
            return;
          }
          const addRequest = objectStore.add({
            username:username,
            menus:menu.menus
          });
          addRequest.onsuccess = () => {
            resolve(true);
          };
          addRequest.onerror = (e) => {
            reject(e.target.error);
          };
        }
        transaction.oncomplete = () => {
          console.log('所有数据添加完成');
        };
      });
    },
  };

五、使用

// main.js
// 连接IndexDB 全局使用
import IndexDB from '@/utils/indexedDB';
async function connectIndexDB(){
    try {
        window.db = await IndexDB.openDatabase();
    }
    catch (e) {
        console.log('打开数据库失败',e);
    }  
}

// login.vue
import IndexDB from '@/utils/indexedDB';
const toLogin= function(){
    if(!(window as any).db){
        console.error('数据库未打开');
        return
    }
    axios.post('/api/login',loginObj).then(res=>{
        console.log('请求登录',res.data)
        if(res.status==200){
            IndexDB.addMenu(loginObj.username,res.data).then(res=>{
                console.log('添加菜单成功',res)
                router.replace('/')
            }).catch(err=>{
                console.error('添加菜单失败',err)
            })
            localStorage.setItem('username',loginObj.username)
        }
    })
}