|
| 1 | +<template> |
| 2 | + <div class="scroll-y"> |
| 3 | + <div class="mb-2">IndexDbDemo.vue</div> |
| 4 | + <button @click="addData()">增加数据</button> |
| 5 | + |
| 6 | + <br /> |
| 7 | + |
| 8 | + <br /> |
| 9 | + <button @click="updateData()">编辑数据</button> |
| 10 | + |
| 11 | + <br /> |
| 12 | + |
| 13 | + <br /> |
| 14 | + <button @click="deleteData()">删除数据</button> |
| 15 | + |
| 16 | + <br /> |
| 17 | + <br /> |
| 18 | + <br /> |
| 19 | + <button @click="findData()">查找数据</button> |
| 20 | + |
| 21 | + <div class="mt-2">显示的数据</div> |
| 22 | + <div>{{ personData }}</div> |
| 23 | + </div> |
| 24 | +</template> |
| 25 | + |
| 26 | +<script setup> |
| 27 | +//参考文档：https://www.cnblogs.com/chenjun1/p/11644866.html |
| 28 | +
|
| 29 | +import { reactive, toRefs } from 'vue' |
| 30 | +// 创建数据库 |
| 31 | +// 第一个参数为数据库名称，第二个数据库为版本号，返回一个IDBOpenDBRequest对象用于操作数据库。 |
| 32 | +// 对于open()的第一个参数数据库名，open()会先去查找本地是否已有这个数据库，如果有则直接将这个数据库返回，如果没有，则先创建这个数据库，再返回。对于第二个参数版本号，则是一个可选参数，如果不传，默认为1，但是如果传入必须是一个整数 |
| 33 | +const request = indexedDB.open('myDatabase', 1) |
| 34 | +let db |
| 35 | +request.onsuccess = function (event) { |
| 36 | + db = request.result |
| 37 | + console.log('数据库打开成功') |
| 38 | +} |
| 39 | +request.onerror = function (event) { |
| 40 | + console.log('数据库打开报错') |
| 41 | +} |
| 42 | +//数据库升级事件 |
| 43 | +request.onupgradeneeded = function (event) { |
| 44 | + db = event.target.result |
| 45 | + let objectStore |
| 46 | + //新增一张叫做person的表格，主键是id,是否存在，如果不存在再新建 |
| 47 | + if (!db.objectStoreNames.contains('person')) { |
| 48 | + objectStore = db.createObjectStore('person', { keyPath: 'id' }) |
| 49 | + objectStore.createIndex('name', 'name', { unique: false }) |
| 50 | + objectStore.createIndex('email', 'email', { unique: true }) |
| 51 | + } |
| 52 | +} |
| 53 | +const addData = () => { |
| 54 | + let request = db |
| 55 | + .transaction(['person'], 'readwrite') |
| 56 | + .objectStore('person') |
| 57 | + .add({ id: 1, name: '张三', age: 24, email: '[email protected]' }) |
| 58 | +
|
| 59 | + request.onsuccess = function (event) { |
| 60 | + console.log('数据写入成功') |
| 61 | + } |
| 62 | +
|
| 63 | + request.onerror = function (event) { |
| 64 | + console.log('数据写入失败') |
| 65 | + } |
| 66 | +} |
| 67 | +
|
| 68 | +let state = reactive({ |
| 69 | + personData: {} |
| 70 | +}) |
| 71 | +
|
| 72 | +const { personData } = toRefs(state) |
| 73 | +
|
| 74 | +const findData = () => { |
| 75 | + let transaction = db.transaction(['person']) |
| 76 | + let objectStore = transaction.objectStore('person') |
| 77 | + let request = objectStore.get(1) |
| 78 | +
|
| 79 | + request.onerror = function (event) { |
| 80 | + console.log('事务失败') |
| 81 | + } |
| 82 | +
|
| 83 | + request.onsuccess = function (event) { |
| 84 | + if (request.result) { |
| 85 | + state.personData = request.result |
| 86 | + console.log('Name: ' + request.result.name) |
| 87 | + console.log('Age: ' + request.result.age) |
| 88 | + console.log('Email: ' + request.result.email) |
| 89 | + } else { |
| 90 | + console.log('未获得数据记录') |
| 91 | + } |
| 92 | + } |
| 93 | +} |
| 94 | +
|
| 95 | +const updateData = () => { |
| 96 | + let request = db |
| 97 | + .transaction(['person'], 'readwrite') |
| 98 | + .objectStore('person') |
| 99 | + .put({ id: 1, name: '李四', age: 35, email: '[email protected]' }) |
| 100 | +
|
| 101 | + request.onsuccess = function (event) { |
| 102 | + console.log('数据更新成功') |
| 103 | + } |
| 104 | +
|
| 105 | + request.onerror = function (event) { |
| 106 | + console.log('数据更新失败') |
| 107 | + } |
| 108 | +} |
| 109 | +const deleteData = () => { |
| 110 | + let request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1) |
| 111 | +
|
| 112 | + request.onsuccess = function (event) { |
| 113 | + console.log('数据删除成功') |
| 114 | + } |
| 115 | +} |
| 116 | +</script> |
| 117 | + |
| 118 | +<style scoped lang="scss"></style> |
0 commit comments