indexDB 基本用法总结
在项目开发过程中，前端需要存储大量的数据。cookie, localstorage 都有存储长度限制。首先总结一下各个存储的参数
- cookie： 一般由服务器生成，可以设置过期时间；前端采用和js-cookie等组件也可以生成，数据存储大小4k，每次都会携带在请求的header 中，对于请求性能有影响；同时由于请求中都带有，所以也容易出现安全问题，字符串键值对在本地存储数据
- localStorage： 除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器，大小5MB，不参与服务端通讯，字符串键值对在本地存储数据
- sessionStorage：页面关闭就清理刷新依然存在，不支持跨页面交互，大小5MB，不参与服务端通讯，字符串键值对在本地存储数据
- indexedDB：除非被清理，否则一直存在，不限制大小，不参与服务端通讯，IndexedDB 是一个非关系型数据库（不支持通过 SQL 语句操作）。可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案无法提供的能力。
IndexedDB介绍
IndexedDB 属于非关系型数据库。（不支持SQL查询）
特点：
键值对储存 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
异步 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
支持事务 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
支持二进制储存 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象。
储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。储 存 在 电 脑 上 中 的 位 置 为 C:\Users\当 前 的 登 录 用 …\Default\IndexedDB
核心概念
数据库：IDBDatabase 对象，数据库有版本概念，同一时刻只能有一个版本，每个域名可以建多个数据库
对象仓库：IDBObjectStore 对象，类似于关系型数据库的表格
索引： IDBIndex 对象，可以在对象仓库中，为不同的属性建立索引，主键建立默认索引
事务： IDBTransaction 对象，增删改查都需要通过事务来完成，事务对象提供了error,abord,complete三个回调方法，监听操作结果
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象，主键是默认建立索引的属性，可以取当前层级的某个属性，也可以指定下一层对象的属性，还可以是一个递增的整数
indexedDB使用
/**
* 打开或者创建数据库连接
* @param {*} dbName 数据库名称
* @param {*} verson 数据库版本
*/
function openDB(dbName, verson = 1, tableName, uuid) {
return new Promise((resolve, reject) => {
const indexdDB = window.indexedDB
let db
// 打开数据库，如果没有就创建
const request = indexdDB.open(dbName, verson)
// 数据库打开成功的回调
request.onsuccess = function (event) {
db = event.target.result // 数据库对象
console.log('数据库打开成功了')
resolve(db)
}
// 数据库打开失败的回调
request.onerror = function (event) {
console.log('数据库打开失败')
reject(event)
}
// 数据库有更新时的回调 数据库创建或者升级的时候会被触发
request.onupgradeneeded = function (event) {
db = event.target.result
let objStorage = {}
objStorage = db.createObjectStore(
tableName, // 创建表名称为users
{
keyPath: uuid, // 主键
autoIncrement: true // 是否实现自增
}
)
// 创建索引，在后面查询数据的时候可以根据索引查询
objStorage.createIndex(uuid, uuid, { unique: true }) // 因为uuid是主键，所以不能为空不可重复
objStorage.createIndex('name', 'name', { unique: false })
objStorage.createIndex('age', 'age', { unique: false })
}
})
}
/**
* 插入数据
* @param {*} db 数据库对象
* @param {*} storeName 仓库名
* @param {*} data 插入的数据
*/
function addData(db, storeName, data) {
return new Promise((resolve, reject) => {
const request = db
.transaction([storeName], 'readwrite') // 事物对象 指定表格名称和操作模式 只读 或修改
.objectStore(storeName) // 创建仓库对象
.add(data)
console.log(request, 'request')
request.onsuccess = function (event) {
console.log('数据写入成功')
resolve(event)
}
request.onerror = function (event) {
console.log('数据写入失败')
reject(event)
}
})
}
/**
* 通过主键查询数据
* @param {*} db
* @param {*} storeName
* @param {*} key 主键名
* @returns
*/
function getDtaByKey(db, storeName, key) {
return new Promise((resolve, reject) => {
const transaction = db.transaction([storeName])
const objectStore = transaction.objectStore(storeName)
// const request = objectStore.getAll() // 也是查询表里面的所有数据
const request = objectStore.get(key)
request.onsuccess = function (event) {
console.log('查找成功')
resolve(event)
}
request.onerror = function (event) {
console.log('查找失败')
reject(event)
}
})
}
/**
* 开启游标查询
*/
function cursorGetData(db, storeName) {
return new Promise((resolve, reject) => {
const list = []
const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
const request = store.openCursor() // 指针对象
// 游标开启成功
request.onsuccess = function (e) {
const cursor = e.target.result
// 注意这个地方需要做判断，当我们没有数据的时候，那么这个值是空的，他会一直执行
if (cursor) {
list.push(cursor.value)
cursor.continue() //继续遍历存储对象中的所有内容
} else {
console.log('游标对去的数据', list)
}
}
// 游标开启失败
request.onerror = function (e) {
console.log('游标开启失败了')
reject(e)
}
})
}
/**
* 通过索引查询数据
* @param {*} db
* @param {*} storeName
* @param {*} indexName 索引名称
* @param {*} indexValue 索引值
* @returns
*/
function getDataByIndex(db, storeName, indexName, indexValue) {
return new Promise((resolve, reject) => {
const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
const request = store.index(indexName).get(indexValue)
request.onsuccess = function (e) {
const result = e.target.result
resolve(result)
}
request.onerror = function (err) {
console.log(err)
reject(err)
}
})
}
/**
* 通过游标和索引查询数据
* @param {*} db
* @param {*} storeName
* @param {*} indexName
* @param {*} indexValue
* @returns
*/
function cursorGetByIndex(db, storeName, indexName, indexValue) {
return new Promise((resolve, reject) => {
let list = []
const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
// store.index(indexName) 索引对象 IDBKeyRange.only(indexValue) 只针对想
const request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))
request.onsuccess = function (e) {
const cursor = e.target.result
if (cursor) {
list.push(cursor.value)
cursor.continue()
} else {
console.log('游标索引查询结果', list)
resolve(list)
}
}
request.onerror = function (e) {
console.log('查询失败')
reject(e)
}
})
}
function getByIndexPage(db, storeName, indexName, indexValue, page, pageSize) {
return new Promise((resolve, reject) => {
let list = []
let counter = 0 // 计数器
let advanced = true // 是否跳过多少条查询, 如果是false 查询全部数据
const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
const request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))
request.onsuccess = function (e) {
const cursor = e.target.result
// 查询大于第一页的数据，从第二页开始
if (page > 1 && advanced) {
advanced = false
list.push(cursor.value)
cursor.advance((page - 1) * pageSize) // 跳过多少条
return
}
if (cursor) {
list.push(cursor.value)
counter++
if (counter < pageSize) {
cursor.continue()
} else {
cursor = null
console.log('分野查询结果', list)
}
} else {
console.log(list, '分页结果')
}
}
request.onerror = function (e) {
console.log('查询失败')
reject(e)
}
})
}
/**
* 更新数据
*/
function upDateDB(db, storeName, data) {
return new Promise((resolve, reject) => {
const store = db.transaction(storeName, 'readwrite').objectStore(storeName).put(data)
request.onsuccess = function (e) {
const result = e.target.result
resolve(result)
}
request.onerror = function (err) {
console.log(err)
reject(err)
}
})
}
/**
* 通过主键删除数据
*/
function deleteDB(db, storeName, id) {
return new Promise((resolve, reject) => {
const store = db.transaction(storeName, 'readwrite').objectStore(storeName).delete(id)
request.onsuccess = function (e) {
const result = e.target.result
resolve(result)
}
request.onerror = function (err) {
console.log(err)
reject(err)
}
})
}
/**
* 通过索引和游标删除数据
*/
function cursorDelete(db, storeName, indexName, indexValue) {
const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
const request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))
request.onsuccess = function (e) {
let cursor = e.target.result
let deleteRequest
if (cursor) {
deleteRequest = cursor.delete() // 请求删除当前项
deleteRequest.onerror = function () {
console.log('删除失败')
}
deleteRequest.onsuccess = function () {
console.log('删除成功')
}
}
}
}
/**
* 关闭数据库
*/
function closeDB(db) {
db.close()
}
/**
* 删除数据库
*/
function deleteDBALL(dbName) {
return new Promise((resolve, reject) => {
let deleteRquest = window.indexedDB.deleteDatabase(dbName)
deleteRquest.onerror = function () {
console.log('删除失败')
resolve(succ)
}
deleteRquest.onsuccess = function (err) {
console.log('删除成功')
reject(err)
}
})
}
/**
* 生成唯一id的方法
* @returns
*/
function generateUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0,
v = c === 'x' ? r : (r & 0x3) | 0x8
return v.toString(16)
})
}
export {
openDB,
addData,
generateUUID,
getDtaByKey,
cursorGetData,
getDataByIndex,
cursorGetByIndex,
getByIndexPage,
closeDB,
deleteDBALL
}
// 添加
async handleClickA() {
const db = await openDB('class', 1, 'users', 'uuid')
let data = {
uuid: generateUUID(), // 插入uuid时，不能为空否则报错
name: '你个老六',
age: Math.round(Math.random() * 30),
class: [1, 2, 3, 4, 5, 6],
sex: [{ a: 1, b: 2, c: 3 }]
}
await addData(db, 'users', data)
},
// 通过主键搜索 某个表里面的某个数据
async handleClickAsearch() {
let list = {}
const db = await openDB('class', 1)
const res = await getDtaByKey(db, 'users', 'd6f161b7-fe0e-43e3-8e3e-d9a0ddf3951c')
if (res.type === 'success') {
list = res.target.result
}
console.log(list)
},
// 通过游标查询 可以理解为查某个表
async handleClickAcours() {
const db = await openDB('class', 1)
const res = await cursorGetData(db, 'users')
console.log(res)
},
// 通过索引查询
async handleClickAvalues() {
const db = await openDB('class', 1)
const res = await getDataByIndex(db, 'users', 'age', 19)
console.log(res)
},
//通过游标和索引查询数据
async handleClickAandKey() {
const db = await openDB('class', 1)
const res = await cursorGetByIndex(db, 'users', 'age', 19)
console.log(res)
},
// 通过游标和索引查询数据分页
async handleClickAandKeyPage() {
const db = await openDB('class', 1)
const res = await getByIndexPage(db, 'users', 'age', 29, 1, 10)
console.log(res)
}