From da09d67121649addb0400758383ae971ee67e2bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Thu, 19 Oct 2023 08:47:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3indexdb=E8=BF=9E=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/database.js | 108 ----------------------------------------------- src/indexeddb.js | 49 +++++++++++++++++++++ src/main.js | 11 ++--- 3 files changed, 55 insertions(+), 113 deletions(-) delete mode 100644 src/database.js create mode 100644 src/indexeddb.js diff --git a/src/database.js b/src/database.js deleted file mode 100644 index aae99f4..0000000 --- a/src/database.js +++ /dev/null @@ -1,108 +0,0 @@ -// 使用示例： -// const db = new IndexedDB('myDatabase', 1, 'myStore') -// await db.open() -// await db.add({ id: 1, name: 'John' }) -// const data = await db.get(1) -// console.log(data) -// await db.delete(1) - -export default class IndexedDB { - constructor(databaseName, databaseVersion, storeName) { - this.databaseName = databaseName - this.databaseVersion = databaseVersion - this.storeName = storeName - this.db = null - } - - open() { - return new Promise((resolve, reject) => { - const request = indexedDB.open(this.databaseName, this.databaseVersion) - request.onerror = (event) => { - reject(event.target.error) - } - request.onsuccess = (event) => { - this.db = event.target.result - resolve(this.db) - } - request.onupgradeneeded = (event) => { - const db = event.target.result - if (!db.objectStoreNames.contains(this.storeName)) { - db.createObjectStore(this.storeName, { keyPath: 'id' }) - } - } - }) - } - - add(data) { - console.log('add', data) - return new Promise((resolve, reject) => { - const transaction = this.db.transaction([this.storeName], 'readwrite') - const objectStore = transaction.objectStore(this.storeName) - - // 判断是否已经存在 - const request = objectStore.get(data.id) - request.onerror = (event) => { - reject(event.target.error) - } - request.onsuccess = (event) => { - if (event.target.result) return resolve(event.target.result) - const request = objectStore.add(data) - request.onerror = (event) => { - reject(event.target.error) - } - request.onsuccess = (event) => { - resolve(event.target.result) - } - } - }) - } - - get(id) { - console.log('get', id) - return new Promise((resolve, reject) => { - const transaction = this.db.transaction([this.storeName], 'readonly') - const objectStore = transaction.objectStore(this.storeName) - const request = objectStore.get(id) - - request.onerror = (event) => { - reject(event.target.error) - } - - request.onsuccess = (event) => { - resolve(event.target.result) - } - }) - } - - getAll() { - return new Promise((resolve, reject) => { - const transaction = this.db.transaction([this.storeName], 'readonly') - const objectStore = transaction.objectStore(this.storeName) - const request = objectStore.getAll() - - request.onerror = (event) => { - reject(event.target.error) - } - - request.onsuccess = (event) => { - resolve(event.target.result) - } - }) - } - - delete(id) { - return new Promise((resolve, reject) => { - const transaction = this.db.transaction([this.storeName], 'readwrite') - const objectStore = transaction.objectStore(this.storeName) - const request = objectStore.delete(id) - - request.onerror = (event) => { - reject(event.target.error) - } - - request.onsuccess = (event) => { - resolve(event.target.result) - } - }) - } -} diff --git a/src/indexeddb.js b/src/indexeddb.js new file mode 100644 index 0000000..10bc5d2 --- /dev/null +++ b/src/indexeddb.js @@ -0,0 +1,49 @@ +export default class IndexedDB { + constructor(databaseName, databaseVersion) { + this.databaseName = databaseName + this.databaseVersion = databaseVersion + this.db = null + } + + open(name) { + return new Promise((resolve, reject) => { + const request = indexedDB.open(this.databaseName, this.databaseVersion) + request.onerror = (event) => { + reject(event.target.error) + } + request.onsuccess = (event) => { + this.db = event.target.result + resolve(this.db) + } + request.onupgradeneeded = (event) => { + const db = event.target.result + if (!db.objectStoreNames.contains('todo')) { + db.createObjectStore(name, { keyPath: 'id' }) + console.log('store created:', name) + } + } + }) + } + + async store(name) { + if (!this.db) return await this.open(name) + return new Promise((resolve, reject) => { + const request = this.db.transaction([name], 'readwrite').objectStore(name) + resolve(request) + }) + } + + getAll(name) { + return new Promise((resolve, reject) => { + const transaction = this.db.transaction([name], 'readonly') + const objectStore = transaction.objectStore(name) + const request = objectStore.getAll() + request.onerror = (event) => { + reject(event.target.error) + } + request.onsuccess = (event) => { + resolve(event.target.result) + } + }) + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index a71b129..eb14673 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import 'virtual:windi.css' import 'virtual:windi-devtools' -import IndexedDB from './database.js' +import IndexedDB from './indexeddb.js' import MusicList from './music.js' import ClientList from './client.js' import Chat from './chat.js' @@ -24,9 +24,11 @@ function appendBuffer(buffer1, buffer2) { //await imageStore.open() // 读取本地音乐列表并标识为缓存状态(本地缓存) -const musicStore = new IndexedDB('musicDatabase', 1, 'musicObjectStore') -await musicStore.open() -const list = (await musicStore.getAll()).map(item => { +const database = new IndexedDB('musicDatabase', 1) +const musicStore = await database.store('musicObjectStore') + +//// 读取本地音乐列表并标识为缓存状态(本地缓存) +const list = (await database.getAll('musicObjectStore')).map(item => { return { save: true, ...item } }) @@ -99,7 +101,6 @@ const musicList = new MusicList({ }, onupdate: item => { //console.info('更新音乐', item.name) - musicStore.put(item) }, onerror: error => { console.error('音乐列表错误', error)