Add an alert when a user overfills local storage one way or anotehr

src/lib/browse/SchemeCard.svelte

@@ -5,6 +5,7 @@
   import { map } from "stores";
   import type { SchemeData } from "types";
   import { schemesGj } from "./stores";
+    import { setLocalStorageItem } from "lib/common";
 
   export let scheme: SchemeData;
 
@@ -30,7 +31,7 @@
     // Assuming the schema is always v1
 
     // Put the file in local storage, so it'll be loaded from the next page
-    window.localStorage.setItem(filename, JSON.stringify(gj));
+    setLocalStorageItem(filename, JSON.stringify(gj));
     window.open(
       `scheme.html?authority=${scheme.browse?.authority_or_region}`,
       "_blank",

src/lib/common/index.ts

@@ -18,6 +18,7 @@ export { default as StreetViewHelp } from "./StreetViewHelp.svelte";
 export { default as StreetViewTool } from "./StreetViewTool.svelte";
 export { default as WarningIcon } from "./WarningIcon.svelte";
 export { default as ZoomOutMap } from "./ZoomOutMap.svelte";
+export * from "./storage";
 
 export async function getAuthoritiesGeoJson(): Promise<AuthorityBoundaries> {
   let resp = await fetch(authoritiesUrl);

src/lib/common/storage.ts

@@ -0,0 +1,18 @@
+let storageQuotaExceeded = false;
+const storageQuotaErrorMessage = "Unable to save because the local storage quota has been exceeded: you may need to clear out your web browser's local storage for this app, or  run in private mode before you can save again. Specific error here: ";
+
+export function setLocalStorageItem(name: string, content: string) {
+    try {
+        window.localStorage.setItem(name, content);
+    } catch (error: any) {
+        const isStorageQuotaError = error.stack && error.stack.includes("exceeded the quota.") &&  error.stack.includes("at setLocalStorageItem");
+        if (!storageQuotaExceeded && isStorageQuotaError) {
+            window.alert(storageQuotaErrorMessage + error);
+            storageQuotaExceeded = true;
+        } else if(isStorageQuotaError) {
+            console.log(`StorageQuotaExceeded again: ${error}`);
+        } else {
+            console.log(`Unexpected error when saving locally: ${error}`);
+        }
+    }
+};

src/lib/critical_entry/Form.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Modal } from "lib/common";
+  import { Modal, setLocalStorageItem } from "lib/common";
   import {
     ButtonGroup,
     DefaultButton,
@@ -21,9 +21,9 @@
   let schemeReference = window.localStorage.getItem("schemeReference") ?? "";
   let currentDesignStage =
     window.localStorage.getItem("currentDesignStage") ?? "";
-  $: window.localStorage.setItem("inspector", inspector);
-  $: window.localStorage.setItem("schemeReference", schemeReference);
-  $: window.localStorage.setItem("currentDesignStage", currentDesignStage);
+  $: setLocalStorageItem("inspector", inspector);
+  $: setLocalStorageItem("schemeReference", schemeReference);
+  $: setLocalStorageItem("currentDesignStage", currentDesignStage);
 
   let criticalIssueType = "";
   let locationDescription = "";

src/lib/sidebar/FileManagement.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Modal } from "lib/common";
+  import { Modal, setLocalStorageItem } from "lib/common";
   import {
     gjSchemeCollection,
     hideSchemes,
@@ -61,7 +61,7 @@
   $: {
     if (loaded && $gjSchemeCollection) {
       console.log(`GJ changed, saving to local storage`);
-      window.localStorage.setItem(filename, JSON.stringify(geojsonToSave()));
+      setLocalStorageItem(filename, JSON.stringify(geojsonToSave()));
     }
   }
 

src/pages/ChooseArea.svelte

@@ -21,6 +21,7 @@
     LoggedIn,
     MapLibreMap,
     Popup,
+    setLocalStorageItem,
   } from "lib/common";
   import About from "lib/sidebar/About.svelte";
   import { schema as schemaStore } from "stores";
@@ -84,7 +85,7 @@
       }
 
       // Put the file in local storage, so it'll be loaded from the next page
-      window.localStorage.setItem(filename, JSON.stringify(gj));
+      setLocalStorageItem(filename, JSON.stringify(gj));
       window.location.href = `scheme.html?authority=${gj.authority}&schema=${schema}`;
     } catch (err) {
       pageErrorMessage = `Couldn't load scheme from a file: ${err}`;

src/stores.ts

@@ -3,6 +3,7 @@
 import type { Map } from "maplibre-gl";
 import { writable, type Writable } from "svelte/store";
 import { isStreetViewImagery, type Schema, type UserSettings } from "./types";
+import { setLocalStorageItem } from "lib/common"
 
 // Note this must be set before gjSchemeCollection in lib/draw/stores.ts
 export const schema: Writable<Schema> = writable(defaultSchema());
@@ -17,7 +18,7 @@ export const mapStyle: Writable<string> = writable("dataviz");
 export const userSettings: Writable<UserSettings> =
   writable(loadUserSettings());
 userSettings.subscribe((value) =>
-  window.localStorage.setItem("userSettings", JSON.stringify(value)),
+  setLocalStorageItem("userSettings", JSON.stringify(value)),
 );
 
 function loadUserSettings(): UserSettings {