storage: Use local, not sync

We were running out of sync storage space in FireFox at about 8 bookmarks. Turns out the max available sync storage is 102 kb. The max for local is 5 MB. Let's use that instead, even though we lose the sync advantage. We'll keep the color mode in sync storage, since that doesn't take up much space. Closes #30
masonmcelvain · Aug 29, 2022 · 617cb24 · 617cb24
1 parent 2593d05
commit 617cb24
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 37 deletions.
diff --git a/src/contexts/Links/index.tsx b/src/contexts/Links/index.tsx
@@ -50,49 +50,61 @@ export const LinksProvider = ({
 
     const fetchLegacyLinks = async () => await getLegacyLinks();
 
-    browser.storage.sync
-      .get([StorageKey.LINK_STORAGE_KEYS, StorageKey.NEXT_LINK_ID])
-      .then((result) => {
-        const nextLinkId = result[StorageKey.NEXT_LINK_ID];
-        const storedLinkKeys = result[StorageKey.LINK_STORAGE_KEYS];
+    type StorageArea =
+      | browser.Storage.Static["sync"]
+      | browser.Storage.Static["local"];
+    const getFromStorage = async (storageArea: StorageArea) => {
+      storageArea
+        .get([StorageKey.LINK_STORAGE_KEYS, StorageKey.NEXT_LINK_ID])
+        .then((result) => {
+          const nextLinkId = result[StorageKey.NEXT_LINK_ID];
+          const storedLinkKeys = result[StorageKey.LINK_STORAGE_KEYS];
 
-        if (nextLinkId && storedLinkKeys && storedLinkKeys.length > 0) {
-          payload.nextLinkId = nextLinkId;
-          payload.linkKeys = storedLinkKeys;
-          browser.storage.sync.get(storedLinkKeys).then((result) => {
-            const storedLinks = storedLinkKeys.map(
-              (key: string) => result[key] as LinkData
-            );
-            payload.links = storedLinks;
-
-            dispatch({
-              type: LinkAction.SET_STATE_FROM_STORAGE,
-              payload,
-            });
-          });
-        } else if (nextLinkId) {
-          // Migrate legacy links to new storage format
-          fetchLegacyLinks().then((legacyLinks) => {
-            if (legacyLinks && legacyLinks.length > 0) {
-              payload.nextLinkId = nextLinkId;
-              payload.links = legacyLinks;
-              payload.linkKeys = legacyLinks.map((link) =>
-                getStorageKeyForLink(link)
+          if (nextLinkId && storedLinkKeys && storedLinkKeys.length > 0) {
+            payload.nextLinkId = nextLinkId;
+            payload.linkKeys = storedLinkKeys;
+            storageArea.get(storedLinkKeys).then((result) => {
+              const storedLinks = storedLinkKeys.map(
+                (key: string) => result[key] as LinkData
               );
+              payload.links = storedLinks;
 
-              setStoredLinksAndKeys(legacyLinks, payload.linkKeys);
               dispatch({
                 type: LinkAction.SET_STATE_FROM_STORAGE,
                 payload,
               });
-            } else {
-              cleanseStoredState();
-            }
-          });
-        } else {
-          cleanseStoredState();
-        }
-      });
+              return true;
+            });
+          } else if (nextLinkId) {
+            // Migrate legacy links to new storage format
+            fetchLegacyLinks().then((legacyLinks) => {
+              if (legacyLinks && legacyLinks.length > 0) {
+                payload.nextLinkId = nextLinkId;
+                payload.links = legacyLinks;
+                payload.linkKeys = legacyLinks.map((link) =>
+                  getStorageKeyForLink(link)
+                );
+
+                setStoredLinksAndKeys(legacyLinks, payload.linkKeys);
+                dispatch({
+                  type: LinkAction.SET_STATE_FROM_STORAGE,
+                  payload,
+                });
+                return true;
+              } else {
+                cleanseStoredState();
+              }
+            });
+          } else {
+            cleanseStoredState();
+          }
+          return false;
+        });
+    };
+
+    if (!getFromStorage(browser.storage.local)) {
+      getFromStorage(browser.storage.sync);
+    }
   }, []);
 
   React.useEffect(() => {

diff --git a/src/lib/webextension.ts b/src/lib/webextension.ts
@@ -55,7 +55,7 @@ export function getLinkIdForStorageKey(key: string): number {
 function setStorageWithKey(key: string, value: any) {
   const storageObj: Record<string, any> = {};
   storageObj[key] = value;
-  browser.storage.sync.set(storageObj);
+  browser.storage.local.set(storageObj);
 }
 
 /**