【前端小技能】--窗口间数据如何通讯，前端对大数据量如何存储~IndexedDB

在日常开发过程中，浏览器端的存储我们一般采用localStorage和sessionStorage，但是都有一定的存储大小要求，那么如果碰到大数据量需要存储话，前者则不能满足我们的需求（亲历工作中遇到的问题），所以我们可以尝试使用IndexedDB，下边介绍其基本使用方法。
注意：数据库是异步操作，所以我们采用了Promise方式

1、打开数据库open

function openIndexDB(dbName, version = 1) {
	return new Promise((resolve, reject) => {
		// 兼容浏览器
		let indexDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB
		let db
		// 打开数据库，没有则进行创建
		const request = indexDB.open(dbName, version)
		// 成功后的回调
		request.onsuccess = (event) => {
			console.log("数据库打开成功")
			db = event.target.result
			resolve(db)
		}
		request.onerror = (error) => {
			console.log("数据库打开失败=======")
		}

		// 数据库更新时候的回调
		request.onupgradeneeded = (event) => {
			console.log("onupgradeneeded")
			db = event.target.result
			let objectStore = db.createObjectStore("user", {
				keyPath: 'uuid' //主键
			})
			// 创建索引
			objectStore.createIndex('uuid', 'uuid', {
				unique: true // 是否唯一
			})
			// // 创建索引
			objectStore.createIndex('age', 'age', {
				unique: false // 是否唯一
			})
		}
	})
}

测试

const db = await openIndexDB("className", 1)

2、插入数据add

function insertData(db, storeName, data) {
	// 创建事务，
	let request = db.transaction([storeName], 'readwrite').objectStore(storeName).add(data)
	request.onsuccess = (event) => {
		console.log("插入成功")
	}
	request.onerror = (event) => {
		console.log("失败-----")
	}
}

测试

function guid() {
	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);
	});
}

insertData(db, 'user', {
	name: '张三',
	age: Math.round(Math.random() * 30),
	uuid: guid()
})

3、通过主键查询数据get

// 通过主键查询数据
function getDataByKey(db, storeName, key) {
	// 事务
	return new Promise((resolve, reject) => {
		let transaction = db.transaction([storeName])
		let objectStore = transaction.objectStore(storeName)
		let request = objectStore.get(key)
		request.onerror = (event) => {
			console.log("获取失败。。。。。。。")
		}
		request.onsuccess = (event) => {
			resolve(request.result)
		}
	})
}

const dataByKey = await getDataByKey(db, 'user', '7bb441c2-579e-4fe3-9e57-b22d3ee27985')
console.log("通过主键获取数据", dataByKey)

4、通过游标查询数据openCursor

function getDataByCursor(db, storeName) {
	return new Promise((resolve, reject) => {
		let list = []
		// 事务--仓库
		let store = db.transaction([storeName], 'readwrite').objectStore(storeName)
		// 指针对象
		let request = store.openCursor()
		// 游标开启成功，逐行读数据
		request.onsuccess = (e) => {
			let cursor = e.target.result
			if (cursor) {
				list.push(cursor.value)
				cursor.continue()
			} else {
				resolve(list)
			}
		}
	})
}

测试

const data = await getDataByCursor(db, 'user')
console.log('jieguo -----', data)

5、通过索引查询数据index

此时的索引就是我们刚打开数据库时，创建的uuid和age索引

// 通过索引查询数据
function getDataByIndex(db, storeName, indexName, indexValue) {
	return new Promise((resolve, reject) => {
		// 事务--仓库
		let store = db.transaction([storeName], 'readwrite').objectStore(storeName)
		// 指针对象
		let request = store.index(indexName).get(indexValue)
		request.onerror = e => {
			console.log("错误", '=============')
		}
		request.onsuccess = (e) => {
			resolve(e.target.result)
		}
	})
}

测试

const dataByIndex = await getDataByIndex(db, 'user', 'uuid', '65a5f4b6-d135-450f-bb56-226f1ffdf6a9')
console.log("通过索引查询", dataByIndex)

6、通过索引和游标查询数据index、openCursor

function getDataByIndexAndCursor(db, storeName, indexName, indexValue) {
	return new Promise((resolve, reject) => {
		// 事务--仓库
		let store = db.transaction([storeName], 'readwrite').objectStore(storeName)
		// 指针对象
		let request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))
		request.onerror = e => {
			console.log("错误", '=============')
		}
		request.onsuccess = (e) => {
			resolve(e.target.result)
		}
	})
}

测试

const dataByIndexAndCursor = await getDataByIndexAndCursor(db, 'user', 'uuid',
				'65a5f4b6-d135-450f-bb56-226f1ffdf6a9')
console.log("通过索引和游标查询", dataByIndexAndCursor)

7、通过索引和游标分页查询数据index、openCursor、advance

function getDataByIndexAndCursorAndPage(db, storeName, indexName, indexValue, page, size) {
	return new Promise((resolve, reject) => {
		let advanced = true
		// 事务--仓库
		let store = db.transaction([storeName], 'readwrite').objectStore(storeName)
		// 索引对象----指针对象
		let request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))
		let list = []
		let count = 0
		request.onerror = e => {
			console.log("错误", '=============')
		}
		request.onsuccess = (e) => {
			let cursor = e.target.result
			if (page > 1 && advanced) {
				advanced = false
				// 跳过多少条
				cursor.advance((page - 1) * size)
				return
			}
			if (cursor) {
				list.push(cursor.value)
				count++
				if (count < size) {
					// 继续遍历
					cursor.continue()
				} else {
					cursor = null
					resolve(list)
				}
			} else {
				console.log(list)
				resolve(list)
			}
		}
	})
}

测试

const dataByIndexAndCursorAndPage = await getDataByIndexAndCursorAndPage(db, 'user', 'age', 17, 1, 10)
console.log("通过索引和游标分页查询", dataByIndexAndCursorAndPage)

8、更新数据put

• 有则更新，没有则实现插入操作，添加的时候也可以用put方法

// 更新数据
function updateData(db, storeName, updateData) {
	return new Promise((resolve, reject) => {
		// 事务--仓库
		let request = db.transaction([storeName], 'readwrite').objectStore(storeName).put(updateData)
		request.onsuccess = (e) => {
			resolve({
				code: 200,
				msg: '更新成功'
			})
		}
	})
}

测试

let updateDataForm = {
	uuid: 'afe8ec1c-d202-461d-bd57-e83ed3187f57',
	name: '更新后的数据',
	age: 4
}
let result = await updateData(db, 'user', updateDataForm)

9、数据删除操作（删除一条数据）delete

// 删除操作
function deleteData(db, storeName, key) {
	return new Promise((resolve, reject) => {
		// 事务--仓库
		let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(key)
		request.onsuccess = (e) => {
			resolve({
				code: 200,
				msg: '更新成功'
			})
		}
	})
}

测试

result = await deleteData(db, 'user', "086638a3-4bf9-4b54-a241-00c261a21644")
console.log(result)

10、通过索引和游标删除数据（删除多个数据）cursor.delete()

// 通过索引和游标删除数据
function deleteDataByIndexAndCursor(db, storeName, indexName, indexValue) {
	// 事务--仓库
	let store = db.transaction([storeName], 'readwrite').objectStore(storeName)
	// 指针对象
	let request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))
	// 游标开启成功，逐行读数据
	request.onsuccess = (e) => {
		let cursor = e.target.result
		let deleteRequest
		if (cursor) {
			// 请求删除当前项目
			deleteRequest = cursor.delete()
			deleteRequest.onerror = () => {
				console.log("操作失败")
			}
			deleteRequest.onsuccess = () => {
				console.log("删除成功")
			}
			cursor.continue()
		}
	}
}

测试

deleteDataByIndexAndCursor(db, 'user', 'age', 4)

11、关闭数据库close

// 关闭数据库
function close(db){
	db.close()
	console.log("数据库已关闭")
}

close(db)

12、删库跑路（-----哈哈哈----）deleteDatabase

// 删除数据库
function deleteDB(dbName){
	let indexDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB
	let deleteRequest = indexDB.deleteDatabase(dbName)
	deleteRequest.onsuccess = e => {
		console.log("删除成功")
	}
}

deleteDB('className')

测试合集

<script>
	function guid() {
		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);
		});
	}

	async function test() {
		const db = await openIndexDB("className", 1)
		insertData(db, 'user', {
			name: '张三',
			age: Math.round(Math.random() * 30),
			uuid: guid()
		})
		const data = await getDataByCursor(db, 'user')
		console.log('jieguo -----', data)
		const dataByIndex = await getDataByIndex(db, 'user', 'uuid', '65a5f4b6-d135-450f-bb56-226f1ffdf6a9')
		console.log("通过索引查询", dataByIndex)
		const dataByIndexAndCursor = await getDataByIndexAndCursor(db, 'user', 'uuid',
			'65a5f4b6-d135-450f-bb56-226f1ffdf6a9')
		console.log("通过索引和游标查询", dataByIndexAndCursor)
		const dataByIndexAndCursorAndPage = await getDataByIndexAndCursorAndPage(db, 'user', 'age', 17, 1, 10)
		console.log("通过索引和游标分页查询", dataByIndexAndCursorAndPage)
		let updateDataForm = {
			uuid: 'afe8ec1c-d202-461d-bd57-e83ed3187f57',
			name: '更新后的数据',
			age: 4
		}
		let result = await updateData(db, 'user', updateDataForm)
		console.log(result)
		result = await deleteData(db, 'user', "086638a3-4bf9-4b54-a241-00c261a21644")
		console.log(result)
		deleteDataByIndexAndCursor(db, 'user', 'age', 4)
		close(db)
		// deleteDB('className')
	}
	test()
</script>

以上就是对indexDB基本操作的阐述，有问题可以留言一起学习讨论