前端使用indexedDB入门

在项目开发地图的过程中，有一个geoJson面图数据过大，希望只有刚进入页面获取一次，存放在浏览器的 IndexedDB 数据库中，再次刷新直接从该数据库中拿取数据，节省页面渲染时间，提升用户体验。

 

 

let promise = [this.getDetail()] // 获取区域详情数据
if (this.ifSupportIndexedDB()) { // 浏览器是否支持indexedDB
// 初始化数据库
  await this.initIndexDB().then(db => {
    this.db = db // indexDB 数据库对象
  })
  // 从数据库中读取地图上的面图数据，如果有的话，就不下发请求了
  const result = await this.getDataByKey(this.db, 'geoJsonList', 'tlop')
  if (result) {
    this.geoJsonList = result.geoJsonList
  } else {
    promise.push(this.getGeoJsonList()) // 获取面图数据
  }
} else {
  promise.push(this.getGeoJsonList()) // 获取面图数据
}
Promise.all(promise).then(() => {
   console.log('数据获取成功')
})
export default {
  methods: {
    // 初始化 indexDB 数据库，存储三线一单的面图数据(超过5M 无法存储在 LocalStorage 中，只能存到indexDB 了)
    initIndexDB() {
      return new Promise(resolve => {
        let dbName = 'TLOPDB', version = 1, storeName = 'geoJsonList'
        let db
        const request = window.indexedDB.open(dbName, version)
        // 数据库打开成功
        request.onsuccess = (event) => {
          db = event.target.result // 数据库对象
          resolve(db)
        }
        // 数据库打开报错
        request.onerror = (event) => { }
        // 数据库创建或升级的时候会触发
        request.onupgradeneeded = (event) => {
          db = event.target.result // 数据库对象
          let objectStore
          if (!db.objectStoreNames.contains(storeName)) {
            objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表
            // objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段
          }
        }
      })
    },
    // 给数据库添加数据: db: 数据库对象  storeName: 仓库名称  data: 要添加的数据
    addData(db, storeName, data) {
      let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
        .objectStore(storeName) // 仓库对象
        .add(data)
      // 数据写入成功
      request.onsuccess = (event) => { }
      // 数据写入失败
      request.onerror = (event) => {
        throw new Error(event.target.error)
      }
    },
    // 兼容不同浏览器，判断浏览器是否支持IndexDB
    ifSupportIndexedDB() {
      return 'indexedDB' in window
    }
  }
}