[优化]用indexedDb代替localstorage本地化多语言

搞个Db类

export default class DB {
  constructor(dbName) {
    this.dbName = dbName
    this.db = null
  }
  openStore(dbName, keyPath, indexs) {
    return new Promise((resolve, reject) => {
      const request = window.indexedDB.open(this.dbName, 1)
      // console.log('我在数据里');
      request.onsuccess = (event) => {
        this.db = event.target.result;
        // console.log('打开成功');
        // console.log(event);
        console.log(this.db, 'this.db');
        resolve(this.db)
      }
      request.onerror = (event) => {
        // console.log('打开失败');
        // console.log(event)
        reject()
      }
      request.onupgradeneeded = (event) => {
        // 第一步,创建对象仓库
        const db = event.target.result
        const store = db.createObjectStore(dbName, { autoIncrement: true, keyPath })
        //传入数组,动态地创建索引
        if (indexs && indexs.length > 1) {
          indexs.map(item => {
            store.createIndex(item, item, { unique: false })
          })
        }
        store.transaction.oncomplete = () => {
          console.log('创建仓库成功');
        }
        console.log('更新成功');
        console.log(event)
      }
    })
  }
  addLover(storeName, data) {
    // console.log(this.db);

    return new Promise((resolve, reject) => {
      console.log(this.db, '打印当前');
      const store = this.db.transaction([storeName], "readwrite").objectStore(storeName)
      const request = store.put(data)
      request.onsuccess = (e) => {
        console.log('增加成功', e);
        resolve()
      }
      request.onerror = (e) => {
        console.log('增加失败', e);
        reject()
      }
    })


  }
  deleteLover(storeName, key) {
    const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)
    const request = store.delete(key)
    request.onsuccess = () => {
      console.log('删除成功');
    }
    request.onerror = () => {
      console.log('删除失败');
    }

  }
  // 查询所有数据
  getAllList(storeName) {
    return new Promise((resolve, reject) => {
      const store = this.db.transaction([storeName]).objectStore(storeName)
      const request = store.getAll()
      request.onsuccess = (e) => {
        console.log('查询成功');
        // console.log(e.target.result);
        resolve(e.target.result)
      }
      request.onerror = () => {
        console.log('查询失败');
        reject('查询失败')
      }
    })
  }
  // 查询某一条数据
  getItem(storeName, key) {
    return new Promise((resolve, reject) => {
      const store = this.db.transaction([storeName]).objectStore(storeName)
      const request = store.get(key)
      request.onsuccess = (e) => {
        console.log('查询成功');
        // console.log(e.target.result);
        resolve(e.target.result)
      }
      request.onerror = () => {
        console.log('查询失败');
        reject()
      }
    })
  }
}

再写两个触发函数,一个保存,一个获取

import DB from '@/utils/indexedDb.js'
const myDB = new DB('TAN')
//保存语言
export async function saveLanguageApi(lang) {
  // console.log('触发');
  const loading = ElLoading.service({
    lock: true,
    text: '保存中',
    background: 'rgba(0, 0, 0, 0.1)',
  })
  setTimeout(() => {
    loading.close()
  }, 500)
  await myDB.openStore('language', 'id', ['name'])
  const resultOrNot = await myDB.getItem('language', 1).then(res => {
    return { code: 200, message: "获取成功", result: res || null, success: true }
  })
  const { success } = resultOrNot//获取可能为空?
  let obj = {}
  if (success) {//说明数据存在,更新数据
    obj = { name: lang, id: 1 }
  } else {//数据不存在,新增数据
    obj = { name: lang }
  }
  const result = await myDB.addLover('language', obj).then(res => {
    return { code: 200, message: '增加成功', result: null, success: true }
  })
  return true
}
export async function getLanguageApi() {
  const loading = ElLoading.service({
    lock: true,
    text: '获取语言中',
    background: 'rgba(0, 0, 0, 0.1)',
  })
  setTimeout(() => {
    loading.close()
  }, 500)
  await myDB.openStore('language', 'id', ['name'])
  return await myDB.getItem('language', 1).then(res => {
    return { code: 200, message: '获取成功', result: res, success: true }
  })
}

初始化再调用即可

onMounted(() => {
  init()
})
const init = async () => {
  let res = await getLanguageApi()
  console.log(res.result.name);
  if (res.result && res.result.name == 'en') {
    lang.value = en
    locale.value = 'en'
  } else if (res.result && res.result.name == 'zh') {
    lang.value = zhCn
    locale.value = 'zh'
  }
}