树形结构数据存储在 IndexedDB

树形结构数据存储在 IndexedDB

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 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'