Improved caching for integrity checks on client side.

frontend/pages/integrity.vue

@@ -250,6 +250,7 @@ import Message from '~/components/Message'
 import {awaitElement, copyText, makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
 import moment from 'moment'
 import Lazy from '~/components/Lazy'
+import {useSessionCache} from '~/utils/cache'
 
 useHead({title: 'File Integrity'})
 
@@ -261,6 +262,7 @@ const isDeleting = ref(false)
 const filter = ref('')
 const showFilter = ref(false)
 const isCached = ref(false)
+const cache = useSessionCache();
 
 const selectAll = ref(false)
 const massActionInProgress = ref(false)
@@ -299,7 +301,13 @@ const loadContent = async () => {
 
     isLoading.value = false
     isCached.value = Boolean(json?.fromCache ?? false)
+
+    cache.set('integrity', {
+      items: items.value,
+      fromCache: isCached.value
+    })
   } catch (e) {
+    console.error(e)
     notification('error', 'Error', `Request error. ${e.message}`)
   }
 }
@@ -358,6 +366,9 @@ const emptyCache = async () => {
     isCached.value = false
     selectAll.value = false
     selected_ids.value = []
+    if (cache.has('integrity')) {
+      cache.remove('integrity')
+    }
 
     notification('success', 'Success', `Cache purged.`)
   } catch (e) {
@@ -384,4 +395,13 @@ const filterItem = item => {
 
   return Object.values(item).some(v => typeof v === 'string' ? v.toLowerCase().includes(filter.value.toLowerCase()) : false)
 }
+
+onMounted(() => {
+  if (items.value.length < 1 && cache.has('integrity')) {
+    const cachedData = cache.get('integrity')
+    items.value = cachedData.items
+    isCached.value = cachedData.fromCache
+    isLoaded.value = true
+  }
+})
 </script>

frontend/utils/cache.js

@@ -0,0 +1,88 @@
+/**
+ * Cache class
+ *
+ * @class
+ * @param {string} engine - The engine to use for caching. Either 'session' or 'local'.
+ * @throws {Error} If the engine is not supported.
+ */
+class Cache {
+    supportedEngines = ['session', 'local']
+
+    constructor(engine = 'session') {
+        if (!this.supportedEngines.includes(engine)) {
+            throw new Error(`Engine '${engine}' not supported.`)
+        }
+
+        if ('session' === engine) {
+            this.storage = window.sessionStorage
+        } else {
+            this.storage = window.localStorage
+        }
+    }
+
+    /**
+     * Set a value in the cache
+     *
+     * @param key {string}
+     * @param value {*}
+     * @param ttl {number|null} - Time to live in milliseconds. If null, the value will not expire.
+     */
+    set(key, value, ttl = null) {
+        this.storage.setItem(key, JSON.stringify({value, ttl, time: Date.now()}))
+    }
+
+    /**
+     * Get a value from the cache
+     *
+     * @param key {string}
+     * @returns {any}
+     */
+    get(key) {
+        const item = this.storage.getItem(key)
+        if (null === item) {
+            return null
+        }
+
+        try {
+            const {value, ttl, time} = JSON.parse(item)
+            if (null !== ttl && Date.now() - time > ttl) {
+                this.remove(key)
+                return null
+            }
+            return value
+        } catch (e) {
+            return item
+        }
+    }
+
+    /**
+     * Remove a value from the cache
+     *
+     * @param key {string}
+     */
+    remove(key) {
+        this.storage.removeItem(key)
+    }
+
+    /**
+     * Clear the cache
+     */
+    clear() {
+        this.storage.clear()
+    }
+
+    /**
+     * Check if a key is in the cache
+     *
+     * @param key {string}
+     * @returns {boolean}
+     */
+    has(key) {
+        return null !== this.get(key)
+    }
+}
+
+const useSessionCache = () => new Cache('session')
+const useLocalCache = () => new Cache('local')
+
+export {useSessionCache, useLocalCache, Cache}