refactor(Storage)!: use localStorage instead of localForage

nuxt.config.js

@@ -93,10 +93,7 @@ export default {
     { src: '~/plugins/z.vue-matomo.js', mode: 'client' }
   ],
 
-  buildModules: [
-    // https://github.com/nuxt-community/localforage-module
-    '@nuxtjs/localforage'
-  ],
+  buildModules: [],
 
   tailwindcss: {
     viewer: false,
@@ -106,11 +103,6 @@ export default {
     cssPath: '~/assets/css/main.css'
   },
 
-  localforage: {
-    name: 'Rule34App',
-    storeName: 'localForage'
-  },
-
   modules: [
     '@nuxtjs/pwa',
     '@nuxtjs/axios',
@@ -266,13 +258,6 @@ export default {
         // Matomo
         'ao.sync',
 
-        // localForage
-        'Database',
-        'indexedDB',
-        'window.webkitStorageInfo',
-        'QuotaExceededError',
-        'Transaction timed out due to inactivity',
-
         // Axios
         'timeout of 0ms exceeded'
       ],

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
     "@nuxtjs/axios": "^5.13.6",
-    "@nuxtjs/localforage": "^1.1.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/sentry": "^5.1.7",
     "@nuxtjs/sitemap": "^2.4.0",

pages/settings.vue

@@ -107,8 +107,6 @@ export default {
     async removeLocalStorage() {
       localStorage.clear()
 
-      await this.$localForage.clear()
-
       location.reload()
     },
   },

plugins/c.vuex-persist.js

@@ -1,88 +1,72 @@
-import VuexPersistence from 'vuex-persist'
+import { VuexPersistence } from 'vuex-persist'
 
 export default (context) => {
-  const {
-    store,
-    $localForage,
-    app: { router },
-  } = context
+  const { store } = context
 
   // Booru state
   new VuexPersistence({
     key: 'vuex-booru',
 
-    storage: $localForage,
-    asyncStorage: true,
+    storage: window.localStorage,
 
     reducer: (state) => ({
       booru: {
-        history: state.booru.history,
-      },
-    }),
+        history: state.booru.history
+      }
+    })
   }).plugin(store)
 
   // Default state
   new VuexPersistence({
     key: 'vuex-root',
 
-    storage: $localForage,
-    asyncStorage: true,
+    storage: window.localStorage,
 
     reducer: (state) => ({
       version: state.version,
 
-      statistics: state.statistics,
-    }),
+      statistics: state.statistics
+    })
   }).plugin(store)
 
   // Notifications state
   new VuexPersistence({
     key: 'vuex-notifications',
 
-    storage: $localForage,
-    asyncStorage: true,
+    storage: window.localStorage,
 
     reducer: (state) => ({
       notifications: {
         // Double because the state and module are named the same
         notifications: {
-          latestTitle: state.notifications.notifications.latestTitle,
-        },
-      },
-    }),
+          latestTitle: state.notifications.notifications.latestTitle
+        }
+      }
+    })
   }).plugin(store)
 
   // User state
   new VuexPersistence({
     key: 'vuex-user',
 
-    storage: $localForage,
-    asyncStorage: true,
+    storage: window.localStorage,
 
     reducer: (state) => {
       const SETTINGS_OBJ = {}
 
       // Recreate every setting's value path to save them to localStorage (this way we dont save other data like titles, defaultValue, etc.)
       Object.keys(state.user.settings).forEach((key) => {
         SETTINGS_OBJ[key] = {
-          value: state.user.settings[key].value,
+          value: state.user.settings[key].value
         }
       })
 
       return {
         user: {
           custom: state.user.custom,
-          settings: SETTINGS_OBJ,
-        },
+          settings: SETTINGS_OBJ
+        }
       }
-    },
+    }
   }).plugin(store)
-
-  // Fix for async storage
-  const waitForStorageToBeReady = async (to, from, next) => {
-    await store.restored
-    next()
-  }
-
-  router.beforeEach(waitForStorageToBeReady)
 }