本文主要是介绍indexedDB的基本操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
indexedDB概述
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
<script>import { onMounted } from 'vue'export default {name: 'indexedDB',//测试indexedDBsetup() {let db = null;function initData() {// 打开数据库// 打开数据库:如果数据库不存在，则新建数据库// 参数1：数据库名称// 参数2：数据库版本号const request = window.indexedDB.open('test', 5)request.onerror = function (event) {console.log('数据库打开报错');}request.onsuccess = function (event) {console.log('数据库打开成功');console.log(event.target);db = event.target.result// let objectStore;// if (!db.objectStoreNames.contains('person')) {// // 索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）// objectStore = db.createObjectStore('person', { keyPath: 'id' });// objectStore.createIndex('name', 'name', { unique: false });// objectStore.createIndex('email', 'email', { unique: true });// }db.onerror = function(error){// 全局错误配置console.log('error---------',error)}}request.onupgradeneeded = function (event) {// 新建数据库以后，第一件事是新建对象仓库（即新建表）// 参数1：对象仓库名称// 参数2：设置对象仓库的配置（keyPath和autoIncrement）console.log('建person对象仓库')db = event.target.resultlet objectStore;if (!db.objectStoreNames.contains('person')) {// 索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）objectStore = db.createObjectStore('person', { keyPath: 'id',autoIncrement: true });objectStore.createIndex('name_1', 'name', { unique: false });objectStore.createIndex('email_1', 'email', { unique: false });objectStore.createIndex('children', 'children', { unique: false });}}}function add() {const datas = [{name: '张三',email: 'zhangsan@example.comn',children: [{ name: 'li', age: 15 }]},{name: '李四',email: 'zhangs111an@example.comn',children: [{ name: 'li', age: 12 }]},]const objectStore = db.transaction(['person'],'readwrite').objectStore('person');datas.forEach(item => {objectStore.add(item).onsuccess = function (event) {console.log('数据写入成功------');}})}function modify() {const request = db.transaction(['person'], 'readwrite').objectStore('person').put({id: 2, name: '张三22', email: 'zhangsan@example.comn', children: [{ name: 'zhao', age: 13 },{ name: 'qian', age: 14 },]});request.onsuccess = function (event) {console.log('数据修改成功------');};request.onerror = function (event) {console.log('数据修改失败');}}function del() {const request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1);request.onsuccess = function (event) {console.log('数据删除成功------');};request.onerror = function (event) {console.log('数据删除失败');}}function search() {// 按主键查询const request = db.transaction(['person'], 'readwrite').objectStore('person').get(2);request.onsuccess = function (event) {console.log('数据seach成功------',event.target.result);};request.onerror = function (event) {console.log('数据seach失败');}}function search2() {// 遍历所有const request = db.transaction(['person'], 'readwrite').objectStore('person').openCursor() //默认只返回一条，cursor.continue 调用所有request.onsuccess = function (event) {const cursor = request.resultif (cursor) {console.log('数据search2成功result',cursor.value);cursor.continue()}};request.onerror = function (event) {console.log('数据search2失败');}}function searchIDBKeyRange() {// 根据索引:name_1:【'张三','张三'】查找// const range = IDBKeyRange.bound('张三','张三'); //同时指定上下限// const request = db.transaction(['person'], 'readwrite')// .objectStore('person').index('name_1').openCursor(range) //默认只返回一条，cursor.continue 调用所有// const request = db.transaction(['person'], 'readwrite')// .objectStore('person').index('name_1').openCursor(range) //默认只返回一条，cursor.continue 调用所有// 根据主键【1,2】查找const range = IDBKeyRange.bound(1,2); //同时指定上下限const request = db.transaction(['person'], 'readwrite').objectStore('person').openCursor(range) //默认只返回一条，cursor.continue 调用所有request.onsuccess = function (event) {const cursor = request.resultif (cursor) {console.log('数据IDBKeyRange成功result',cursor.value);cursor.continue()}};request.onerror = function (event) {console.log('数据search2失败');}}onMounted(() => {initData()})return {add,del,modify,search,search2,searchIDBKeyRange}}}</script><template><div id="three" width="1000" height="800"></div><div>测试indexedDB<button @click="add">新增</button><button @click="del">删除</button><button @click="modify">修改</button><button @click="search">查询</button><button @click="search2">遍历查询</button><button @click="searchIDBKeyRange">按条件查询</button></div>
</template><style scoped>
</style>
这篇关于indexedDB的基本操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
