浏览器数据库 IndexedDB 详解

IndexedDB 是一个事务型(非关系型)数据库。它是浏览器提供的本地数据库,可以被网页脚本创建和操作,允许存贮大量数据,提供查找接口,能建立索引,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。

IndexedDB 的主要特点:

1、IndexedDB 遵守同源策略。因此当你在某个域名(网页)下操作储存数据的时候,你不能操作其他域名(网页)下的数据,即不能访问跨域的数据库;

2、IndexedDB 执行的操作是异步执行的,不会影响用户进行其他操作。这样也可以防止进行大量数据的读写时,对网页性能有影响;

3、IndexedDB是采用对象仓库(类似关系型数据库中的表)存储数据的。所有类型的数据都可以直接存入,比如js对象,二进制流等。对象仓库中的数据是以键值对的形式保存的,其中键必须是唯一的,不能重复,否则会抛出错误;

4、IndexedDB支持事务(transaction),即操作要么全部执行,要么全部不执行。因此,在执行操作的过程中,只要有一步失败,整个事务就会被取消,数据库会进行回滚,回到事务发生前的状态。

5、IndexedDB的存储空间很大,可达二百多兆。

因此,如果需要用到大的缓存容量,以及需要存储图片、模型等文件且在意性能,就需要用到IndexedDB。

IndexedDB优点是:存储容量大,起码能存几百兆;支持异步操作;具有事务特点;

IndexedDB缺点是:不支持DOM操作;不能跨域。

使用:

封装index.js文件

/**
 * 封装的方法以及用法
 * 打开数据库
 */
export function openDB(dbName, storeName, version = 1) {
  return new Promise((resolve, reject) => {
    const indexedDB = window.indexedDB
    let db
    const request = indexedDB.open(dbName, version)
    request.onsuccess = function(event) {
      db = event.target.result // 数据库对象
      resolve(db)
    }

    request.onerror = function(event) {
      reject(event)
    }

    request.onupgradeneeded = function(event) {
      // 数据库创建或升级的时候会触发
      console.log('onupgradeneeded')
      db = event.target.result // 数据库对象
      let objectStore
      if (!db.objectStoreNames.contains(storeName)) {
        objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表
        // objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段
      }
    }
  })
}

/**
   * 新增数据
   */
export function addData(db, storeName, data) {
  return new Promise((resolve, reject) => {
    const request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式("只读"或"读写")
      .objectStore(storeName) // 仓库对象
      .add(data)

    request.onsuccess = function(event) {
      resolve(event)
    }

    request.onerror = function(event) {
      reject(event)
      throw new Error(event.target.error)
    }
  })
}

/**
   * 通过主键读取数据
   */
export function getDataByKey(db, storeName, key) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction([storeName]) // 事务
    const objectStore = transaction.objectStore(storeName) // 仓库对象
    const request = objectStore.get(key)

    request.onerror = function(event) {
      reject(event)
    }

    request.onsuccess = function(event) {
      resolve(request.result)
    }
  })
}

/**
   * 通过游标读取数据
   */
export function cursorGetData(db, storeName) {
  const list = []
  const store = db.transaction(storeName, 'readwrite') // 事务
    .objectStore(storeName) // 仓库对象
  const request = store.openCursor() // 指针对象
  return new Promise((resolve, reject) => {
    request.onsuccess = function(e) {
      const cursor = e.target.result
      if (cursor) {
        // 必须要检查
        list.push(cursor.value)
        cursor.continue() // 遍历了存储对象中的所有内容
      } else {
        resolve(list)
      }
    }
    request.onerror = function(e) {
      reject(e)
    }
  })
}

/**
   * 通过索引读取数据
   */
export function getDataByIndex(db, storeName, indexName, indexValue) {
  const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
  const request = store.index(indexName).get(indexValue)
  return new Promise((resolve, reject) => {
    request.onerror = function(e) {
      reject(e)
    }
    request.onsuccess = function(e) {
      resolve(e.target.result)
    }
  })
}

/**
   * 通过索引和游标查询记录
   */
export function cursorGetDataByIndex(db, storeName, indexName, indexValue) {
  const list = []
  const store = db.transaction(storeName, 'readwrite').objectStore(storeName) // 仓库对象
  const request = store.index(indexName) // 索引对象
    .openCursor(IDBKeyRange.only(indexValue)) // 指针对象
  return new Promise((resolve, reject) => {
    request.onsuccess = function(e) {
      const cursor = e.target.result
      if (cursor) {
        list.push(cursor.value)
        cursor.continue() // 遍历了存储对象中的所有内容
      } else {
        resolve(list)
      }
    }
    request.onerror = function(ev) {
      reject(ev)
    }
  })
}

/**
   * 更新数据
   */
export function updateDB(db, storeName, data) {
  const request = db.transaction([storeName], 'readwrite') // 事务对象
    .objectStore(storeName) // 仓库对象
    .put(data)

  return new Promise((resolve, reject) => {
    request.onsuccess = function(ev) {
      resolve(ev)
    }

    request.onerror = function(ev) {
      resolve(ev)
    }
  })
}

/**
   * 删除数据
   */
export function deleteDB(db, storeName, id) {
  const request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)

  return new Promise((resolve, reject) => {
    request.onsuccess = function(ev) {
      resolve(ev)
    }

    request.onerror = function(ev) {
      resolve(ev)
    }
  })
}

/**
   * 删除数据库
   */
export function deleteDBAll(dbName) {
  console.log(dbName)
  const deleteRequest = window.indexedDB.deleteDatabase(dbName)
  return new Promise((resolve, reject) => {
    deleteRequest.onerror = function(event) {
      console.log('删除失败')
    }
    deleteRequest.onsuccess = function(event) {
      console.log('删除成功')
    }
  })
}

/**
   * 关闭数据库
   */
export function closeDB(db) {
  db.close()
  console.log('数据库已关闭')
}

export default {
  openDB,
  addData,
  getDataByKey,
  cursorGetData,
  getDataByIndex,
  cursorGetDataByIndex,
  updateDB,
  deleteDB,
  deleteDBAll,
  closeDB
}

将index.js文件引入到indexDB.js中,在indexDB.js中封装添加和获取数据方法,indexDB.js内容如下:

import IndexDB from './index'

// 添加或更新数据
export async function setDBData(data, storeName = 'storeName', dbName = 'dbName', version) {
  const db = await IndexDB.openDB(dbName, storeName, version)
  const data_ = await IndexDB.getDataByKey(db, storeName, data.id)
  // 如果该主键对应的数据已存在,则做更新操作
  if(data_){
    return IndexDB.updateDB(db, storeName, data)
  }
  return IndexDB.addData(db, storeName, data)
}

// 获取数据
export async function getDBData(key, storeName = 'storeName', dbName = 'dbName', version) {
  const db = await IndexDB.openDB(dbName, storeName, version)
  const data_ = await IndexDB.getDataByKey(db, storeName, key)
  // 设置了有效期,且已过期,则删除数据
  if(data_?.expire && data_.expire < new Date().getTime() ){
    await IndexDB.deleteDB(db, storeName, key)
    return
  }
  return data_
}

将indexDB.js文件引入到main.js中,如下:

import Vue from 'vue'
import * as indexDB from './indexDB'
Vue.prototype.$indexDB= indexDB

页面中使用,未设置有效期用法:

export default {
  async created() {
    //添加或更新数据
    this.$indexDB.setDBData({id: 'name', value: '张三'}, 'info','infoDB')
    //获取数据
    const {value} = await this.$indexDB.getDBData('name', 'info','infoDB')
    console.log(value); // 输出:张三
  }
}

页面中使用,设置有效期用法: 

export default {
  async created() {
    //添加或更新数据(设置有效期的用法,有效期以毫秒为单位,这里有效期设置为10s)
    this.$inexDB.setDBData({id: 'name', value: '张三', expire:  new Date().getTime() + 10000}, 'info','infoDB')
    //获取数据
    const {value} = await this.$inexDB.getDBData('name', 'info','infoDB')
    console.log(value); // 输出:张三
  }
}

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>