From 8ce9714a0aac643df4d3d6a1e1dbd227190e30bd Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Tue, 3 Sep 2024 10:05:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=AD=98=E5=82=A8=E5=9C=A8=20IndexedDB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

树形结构数据存储在 IndexedDB
---
 policeManagement/src/views/register.vue | 84 ++++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 3 deletions(-)

diff --git a/policeManagement/src/views/register.vue b/policeManagement/src/views/register.vue
index 8dc152e..b98fa40 100644
--- a/policeManagement/src/views/register.vue
+++ b/policeManagement/src/views/register.vue
@@ -95,10 +95,88 @@ const cascaderChange = (value: any, selectedOptions: any): void => {
   formState.administrativeDivisionCodes = [...value]
 }
 
+const dbName = 'myDatabase' // 定义数据库名称
+const storeName = 'treeStore' // 定义存储空间名称
+
+// 打开或创建 IndexedDB 数据库的函数
+const openDB = () => {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    // 尝试打开名为 'myDatabase' 的数据库，如果不存在则创建
+    const request = indexedDB.open(dbName, 1)
+
+    // 如果数据库需要升级（例如第一次打开或版本号增加），会触发此事件
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result
+      // 创建一个新的对象存储空间（相当于数据库中的表）名为 'treeStore'
+      db.createObjectStore(storeName)
+    }
+
+    // 成功打开数据库后执行此回调
+    request.onsuccess = (event) => {
+      // 将数据库实例传递给 resolve，供后续使用
+      resolve((event.target as IDBOpenDBRequest).result)
+    }
+
+    // 如果打开数据库失败，执行此回调
+    request.onerror = (event) => {
+      // 将错误信息传递给 reject
+      reject((event.target as IDBOpenDBRequest).error)
+    }
+  })
+}
+
+// 将树形结构数据存储到 IndexedDB 中的函数
+const storeTreeData = async (data: any) => {
+  const db = await openDB() // 打开数据库并获取数据库实例
+  const transaction = db.transaction(storeName, 'readwrite') // 创建一个读写事务
+  const store = transaction.objectStore(storeName) // 获取存储空间
+
+  // 使用 'treeData' 作为键，将数据存储到存储空间中
+  store.put(data, 'treeData')
+
+  // 事务完成后执行的回调
+  transaction.oncomplete = () => {
+    console.log('Data stored successfully') // 数据存储成功后输出信息
+  }
+}
+
+// 从 IndexedDB 中加载缓存数据的函数
+const loadTreeFromCache = async (): Promise<any | null> => {
+  const db = await openDB() // 打开数据库并获取数据库实例
+  const transaction = db.transaction(storeName, 'readonly') // 创建一个只读事务
+  const store = transaction.objectStore(storeName) // 获取存储空间
+
+  // 获取存储在 'treeData' 键下的数据
+  const request = store.get('treeData')
+
+  // 数据成功读取后执行此回调
+  request.onsuccess = () => {
+    if (request.result) {
+      // 如果存在缓存数据
+      options.value = request.result // 将数据赋值给 options.value
+    }
+  }
+}
+
+// 获取树形结构数据并存储在 IndexedDB 中的主函数
 const getTree = async () => {
-  const res = await api.get<any>('/common/administrativeDivisionTree')
-  console.log(res)
-  options.value = res.data
+  // 先尝试从缓存中加载数据
+  const cachedData = await loadTreeFromCache()
+
+  if (cachedData) {
+    // 如果缓存存在，直接使用缓存数据
+    options.value = cachedData
+    console.log('Loaded from cache:', cachedData)
+  } else {
+    // 如果缓存不存在，发起 API 请求
+    const res = await api.get<any>('/common/administrativeDivisionTree')
+    console.log(res)
+    options.value = res.data
+
+    // 将获取到的数据存储在 IndexedDB 中
+    await storeTreeData(res.data)
+    console.log('Loaded from API and stored in cache')
+  }
 }
 import type { Rule } from 'ant-design-vue/es/form'
 import type { FormInstance } from 'ant-design-vue'