feat: Move remaining localStorage usages to localforage

7 files changed, 26 insertions, 16 deletions

diff --git a/src/lib/Error/LogInRestricted.svelte b/src/lib/Error/LogInRestricted.svelte
index 07a9adec..54ea5ee1 100644
--- a/src/lib/Error/LogInRestricted.svelte
+++ b/src/lib/Error/LogInRestricted.svelte
@@ -1,14 +1,15 @@
 <script>
   import Popup from '$lib/Layout/Popup.svelte';
   import { env } from '$env/dynamic/public';
+  import localforage from 'localforage';
 </script>
 
 <Popup fullscreen locked>
   <div class="message">
     Please <a
       href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
-      on:click={() => {
-        localStorage.setItem(
+      on:click={async () => {
+        await localforage.setItem(
           'redirect',
           window.location.origin + window.location.pathname + window.location.search
         );
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 9986d1b9..f688eacf 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -4,6 +4,7 @@
   import tooltip from './Tooltip/tooltip';
   import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte';
   import MangaListTemplate from './List/Manga/MangaListTemplate.svelte';
+  import localforage from 'localforage';
 </script>
 
 <div class="example-item card">
@@ -92,8 +93,8 @@
     <span class="medium-text">
       <a
         href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
-        on:click={() => {
-          localStorage.setItem(
+        on:click={async () => {
+          await localforage.setItem(
             'redirect',
             window.location.origin + window.location.pathname + window.location.search
           );
diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 08583d7c..99d2e888 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -13,6 +13,7 @@
   import { onMount } from 'svelte';
   import subsPlease from '$stores/subsPlease';
   import identity from '$stores/identity';
+  import localforage from 'localforage';
 
   export let endTime: number;
   export let cleanMedia: (
@@ -35,13 +36,14 @@
   let pendingUpdate: number | null = null;
   let lastListSize = 8;
 
-  onMount(() => {
+  onMount(async () => {
     if (browser) {
-      const lastStoredList = localStorage.getItem(
+      const lastStoredList = (await localforage.getItem(
         `last${
           notYetReleased ? 'NotYetReleased' : upcoming ? 'Upcoming' : completed ? 'Completed' : ''
         }AnimeListLength`
-      );
+      )) as string | null;
+
       if (lastStoredList) lastListSize = parseInt(lastStoredList);
     }
   });
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 22e8f581..a9026d1d 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -16,6 +16,7 @@
   import CleanGrid from '$lib/List/CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
   import stateBin from '$stores/stateBin';
+  import localforage from 'localforage';
 
   export let media: Media[];
   export let title: any;
@@ -74,7 +75,7 @@
       ? media
       : media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]);
 
-  onMount(() => {
+  onMount(async () => {
     if (dummy) return;
 
     keyCacher = setInterval(
@@ -105,7 +106,7 @@
     );
 
     if (browser)
-      localStorage.setItem(
+      await localforage.setItem(
         `last${
           notYetReleased ? 'NotYetReleased' : upcoming ? 'Upcoming' : completed ? 'Completed' : ''
         }AnimeListLength`,
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index eb54df8c..aeb1bc7e 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -14,6 +14,7 @@
   import CleanGrid from '../CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
   import stateBin from '$stores/stateBin';
+  import localforage from 'localforage';
 
   export let media: Media[];
   export let cleanCache: () => void;
@@ -58,11 +59,14 @@
       ? media
       : media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]);
 
-  onMount(() => {
+  onMount(async () => {
     serviceStatusResponse = fetch(proxy('https://api.mangadex.org/ping'));
 
     if (browser)
-      localStorage.setItem(`last${due ? '' : 'Completed'}MangaListLength`, media.length.toString());
+      await localforage.setItem(
+        `last${due ? '' : 'Completed'}MangaListLength`,
+        media.length.toString()
+      );
   });
 
   const increment = (manga: Media) => {
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index 0b38158b..d7f00616 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -20,6 +20,7 @@
   import { browser } from '$app/environment';
   import identity from '$stores/identity';
   import privilegedUser from '$lib/Utility/privilegedUser';
+  import localforage from 'localforage';
 
   export let user: AniListAuthorisation = {
     accessToken: '',
@@ -57,7 +58,9 @@
 
   onMount(async () => {
     if (browser) {
-      const lastStoredList = localStorage.getItem(`last${due ? '' : 'Completed'}MangaListLength`);
+      const lastStoredList = (await localforage.getItem(
+        `last${due ? '' : 'Completed'}MangaListLength`
+      )) as number | null;
 
       if (lastStoredList) lastListSize = parseInt(lastStoredList);
     }
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 8ba6ade9..c21edb44 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -13,8 +13,6 @@
   const clearCaches = async () => {
     if (!browser) return;
 
-    localStorage.removeItem('anime');
-    localStorage.removeItem('manga');
     await localforage.removeItem('anime');
     await localforage.removeItem('manga');
     addNotification(
@@ -50,8 +48,8 @@
 <p />
 
 <button
-  on:click={() => {
-    localStorage.clear();
+  on:click={async () => {
+    await localforage.clear();
     addNotification(
       options({
         heading: '<code>localStorage</code> successfully cleared'