feat: cache notifications in IndexedDB via storageManager

src/components/messages/NotificationList.vue

@@ -87,6 +87,8 @@ const { CategoryID } = defineProps<{
   CategoryID: number
 }>()
 
+const notificationCacheKey = `notifications:${CategoryID}:${locale.value}`
+
 function fillInTemplate(data: string | null, message: Message) {
   const re = (data ?? '')
     .replace(
@@ -209,15 +211,27 @@ const handleLoad = async (noTemplates = true) => {
       }
     })
 
-    items.value = [...items.value, ...defaultItems]
+    const merged = [...items.value, ...defaultItems]
+    const deduplicated = Array.from(new Map(merged.map((item) => [item.ID, item])).values())
+    items.value = deduplicated
+    await storageManager.setObjToIDB(notificationCacheKey, items.value)
     loading.value = false
     skip.value += 20
   } catch (error) {
     showMessage('error', String(error), { duration: 5000 })
   }
 }
 
-handleLoad(false)
+async function restoreNotificationsFromCache() {
+  const cached = await storageManager.getObjFromIDB<NotificationMessage[]>(notificationCacheKey)
+  if (cached.status !== 'success' || cached.value == null || cached.value.length === 0) return
+  items.value = cached.value
+  skip.value = cached.value.length
+}
+
+restoreNotificationsFromCache().finally(() => {
+  handleLoad(false)
+})
 </script>
 
 <style scoped>

src/services/storage/index.ts

@@ -12,12 +12,52 @@ type localStorages =
   | 'userIDAndAvatarIDMap'
   | 'userAuthInfo'
   | 'cookieConsent'
+  | 'notificationsCache'
 
 interface StorageResult<T> {
   status: StorageStatus
   value: T | null
 }
 
+const IDB_DB_NAME = 'plweb2-storage-db'
+const IDB_STORE_NAME = 'kv'
+
+function openIDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(IDB_DB_NAME, 1)
+    req.onupgradeneeded = () => {
+      const db = req.result
+      if (!db.objectStoreNames.contains(IDB_STORE_NAME)) {
+        db.createObjectStore(IDB_STORE_NAME)
+      }
+    }
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+async function idbGet<T>(key: string): Promise<T | undefined> {
+  const db = await openIDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(IDB_STORE_NAME, 'readonly')
+    const store = tx.objectStore(IDB_STORE_NAME)
+    const req = store.get(key)
+    req.onsuccess = () => resolve(req.result as T | undefined)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+async function idbSet<T>(key: string, value: T): Promise<void> {
+  const db = await openIDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(IDB_STORE_NAME, 'readwrite')
+    const store = tx.objectStore(IDB_STORE_NAME)
+    store.put(value, key)
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error)
+  })
+}
+
 function now() {
   return Date.now()
 }
@@ -72,6 +112,24 @@ const storageManager = {
   clear() {
     localStorage.clear()
   },
+  async getObjFromIDB<T>(key: string, maxAgeMs?: number): Promise<StorageResult<T>> {
+    try {
+      const data = await idbGet<{ value: T; time: number; maxAgeMs?: number }>(key)
+      if (!data) return { status: 'empty', value: null }
+      const ageLimit = maxAgeMs ?? data.maxAgeMs
+      if (ageLimit && data.time && now() - data.time > ageLimit) {
+        return { status: 'expired', value: null }
+      }
+      return { status: 'success', value: data.value }
+    } catch (e) {
+      console.error(e)
+      return { status: 'empty', value: null }
+    }
+  },
+  async setObjToIDB<T>(key: string, value: T, maxAgeMs?: number): Promise<void> {
+    const data = { value, time: now(), maxAgeMs }
+    await idbSet(key, data)
+  },
 }
 
 export default storageManager