Implement indexed DB storage

Author: stevebauman

composables/useIndexedDb.js

@@ -0,0 +1,16 @@
+import { get, set, del } from 'idb-keyval';
+import { useStorageAsync } from '@vueuse/core';
+
+export default function (key, initialValue) {
+    return useStorageAsync(key, initialValue, {
+        async getItem(key) {
+            return await get(key);
+        },
+        async setItem(key, value) {
+            return await set(key, value);
+        },
+        async removeItem(key) {
+            return await del(key);
+        },
+    });
+}

composables/useProjectStoreFactory.js

@@ -2,22 +2,25 @@ import download from 'downloadjs';
 import { v4 as uuid } from 'uuid';
 import { cloneDeep, replace } from 'lodash';
 import { defineStore } from 'pinia';
+import useIndexedDb from './useIndexedDb';
 import { namespace } from './useProjectStores';
-import { useLocalStorage } from '@vueuse/core';
 import useTemplateStore from './useTemplateStore';
 
-export default function (id) {
-    const storage = useLocalStorage(id, {
-        version: '1.10.0',
-        page: {},
-        settings: {},
-        tab: {
-            order: 0,
-            name: null,
-            created_at: new Date(),
-            id: replace(id, namespace, ''),
-        },
-    });
+export default function (id, initialValue = null) {
+    const storage = useIndexedDb(
+        id,
+        initialValue ?? {
+            version: '1.10.0',
+            page: {},
+            settings: {},
+            tab: {
+                order: 0,
+                name: null,
+                created_at: new Date(),
+                id: replace(id, namespace, ''),
+            },
+        }
+    );
 
     return defineStore(id, {
         state: () => storage.value,
@@ -44,8 +47,6 @@ export default function (id) {
              */
             clear() {
                 storage.value = null;
-
-                window.localStorage.removeItem(`${namespace}/${this.tab.id}`);
             },
 
             /**

composables/useProjectStores.js

@@ -1,5 +1,6 @@
 import { Store } from 'pinia';
 import { v4 as uuid } from 'uuid';
+import { entries } from 'idb-keyval';
 import { fileDialog } from 'file-select-dialog';
 import { has, head, sortBy, debounce, startsWith, cloneDeep } from 'lodash';
 import useCurrentTab from './useCurrentTab';
@@ -9,8 +10,10 @@ import { computed, ref, useContext } from '@nuxtjs/composition-api';
 
 export const namespace = 'pages/';
 
-const getPagesFromStorage = () => {
-    return Object.keys(window.localStorage).filter((key) => key.startsWith(namespace));
+const getPagesFromStorage = async () => {
+    return (await entries())
+        .filter(([key]) => key.startsWith(namespace))
+        .map(([key, value]) => [key, JSON.parse(value)]);
 };
 
 export default function () {
@@ -38,17 +41,18 @@ export default function () {
      * Make a new project store.
      *
      * @param {String} id
+     * @param {Object|null} initialValue
      *
      * @returns {Store}
      */
-    const makeProjectStore = (id = null) => {
+    const makeProjectStore = (id = null, initialValue = null) => {
         id = id ?? uuid();
 
         const name = startsWith(id, namespace) ? id : namespace + id;
 
-        const factory = useProjectStoreFactory(name);
+        const make = useProjectStoreFactory(name, initialValue);
 
-        const store = factory();
+        const store = make();
 
         store.load();
 
@@ -195,8 +199,10 @@ export default function () {
     /**
      * Hydrate the projects from local storage.
      */
-    const hydrateFromStorage = () => {
-        const stored = getPagesFromStorage().map((id) => makeProjectStore(id));
+    const hydrateFromStorage = async () => {
+        const stored = (await getPagesFromStorage()).map(([key, value]) =>
+            makeProjectStore(key, value)
+        );
 
         projects.value = sortBy(stored, ({ tab }) => tab.order ?? tab.created_at);
     };

composables/useSettingsStore.js

@@ -1,7 +1,7 @@
 import { isArray } from 'lodash';
 import collect from 'collect.js';
 import { defineStore } from 'pinia';
-import { useLocalStorage } from '@vueuse/core';
+import useIndexedDb from './useIndexedDb';
 
 const mapBackgroundsToArray = (backgrounds) => {
     return collect(backgrounds)
@@ -16,13 +16,13 @@ const getOldBackgrounds = () => {
     return mapBackgroundsToArray(JSON.parse(localStorage.getItem('settings/backgrounds') ?? '[]'));
 };
 
+const state = useIndexedDb('settings', {
+    tab: '',
+    backgrounds: getOldBackgrounds(),
+});
+
 export default defineStore('settings', {
     state: () => {
-        const state = useLocalStorage('settings', {
-            tab: '',
-            backgrounds: getOldBackgrounds(),
-        });
-
         if (!isArray(state.value.backgrounds)) {
             state.value.backgrounds = mapBackgroundsToArray(state.value.backgrounds);
         }

composables/useTemplateStore.js

@@ -1,14 +1,12 @@
 import { defineStore } from 'pinia';
-import { useLocalStorage } from '@vueuse/core';
+import useIndexedDb from './useIndexedDb';
 
-const getOldTemplates = () => {
-    const keys = Object.keys(window.localStorage).filter((key) => key.startsWith('templates/'));
+const oldLocalTemplates = window.localStorage.getItem('templates') ?? '[]';
 
-    return keys.map((k) => JSON.parse(window.localStorage.getItem(k)));
-};
+const state = useIndexedDb('templates', JSON.parse(oldLocalTemplates));
 
 export default defineStore('templates', {
-    state: () => useLocalStorage('templates', getOldTemplates()),
+    state: () => state,
 
     actions: {
         /**

license.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Steve Bauman
+Copyright (c) 2022 Steve Bauman
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal