chache idmap on client

web/src/App.svelte

@@ -5,7 +5,12 @@
   import AddIDModal from "./lib/AddIDModal.svelte";
   import ExportModal from "./lib/ExportModal.svelte";
   import { generateCSVFile } from "./lib/exporting";
-  import { fetchMapping, type IDMap } from "./lib/IDMapping";
+  import {
+    cacheMappingInLocalstore,
+    fetchMapping,
+    loadCachedMappingFromLocalstore,
+    type IDMap,
+  } from "./lib/IDMapping";
   import { downloadBlob } from "./lib/downloadBlob";
 
   let lastID: string = $state("");
@@ -15,7 +20,11 @@
   let exportModal: ExportModal;
 
   onMount(async () => {
-    mapping = await fetchMapping();
+    mapping = loadCachedMappingFromLocalstore();
+
+    let fetchedMapping = await fetchMapping();
+    mapping = fetchedMapping;
+    cacheMappingInLocalstore(fetchedMapping);
 
     let sse = new EventSource("/api/idevent");
     sse.addEventListener("msg", function (e) {

web/src/lib/IDMapping.ts

@@ -32,6 +32,32 @@ export async function fetchMapping(): Promise<IDMap> {
   return map;
 }
 
+const CACHE_KEY = "idmap";
+
+export function cacheMappingInLocalstore(mapping: IDMap) {
+  if (!localStorage) {
+    console.error("localStorage is not available");
+    return;
+  }
+
+  localStorage.setItem(CACHE_KEY, JSON.stringify(mapping));
+}
+
+export function loadCachedMappingFromLocalstore(): IDMap | null {
+  if (!localStorage) {
+    console.error("localStorage is not available");
+    return null;
+  }
+
+  const data = localStorage.getItem(CACHE_KEY);
+  if (!data) {
+    return null;
+  }
+
+  const mapping = JSON.parse(data);
+  return mapping;
+}
+
 export async function addMapping(id: string, firstName: string, lastName: string) {
   let req = await fetch("/api/mapping", {
     method: "POST",