feat: automatic localstorage cleaning

core/static/bundled/base-bundle-index.ts

@@ -3,9 +3,12 @@ import Alpine from "alpinejs";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import htmx from "htmx.org";
 import { limitedChoices } from "#core:alpine/limited-choices";
-import { expireOldStorage } from "#core:core/cache";
+import { cacheBuster } from "#core:core/localstorage";
 import { default as navbar } from "#core:core/navbar";
-import { type NotificationPlugin, notificationsPlugin as notifications, } from "#core:utils/notifications";
+import {
+  type NotificationPlugin,
+  notificationsPlugin as notifications,
+} from "#core:utils/notifications";
 
 /**
  * Alpine
@@ -50,4 +53,4 @@ navbar();
 /**
  * Script that clears the cache when the cache version changes
  */
-expireOldStorage();
+cacheBuster();

core/static/bundled/core/localstorage.ts

@@ -0,0 +1,24 @@
+// increment this number when a breaking change is made with localStorage
+const CURRENT_CACHE_VERSION = 1;
+
+export function cacheBuster() {
+  const version = Number.parseInt(localStorage.getItem("version") ?? "0", 10);
+  if (version === CURRENT_CACHE_VERSION) {
+    // The cache schema is up-to-date. Nothing to do.
+    return;
+  }
+  localStorage.removeItem("basket");
+  localStorage.removeItem("basket1");
+  // remove all storage items which key is in the form
+  // `userXXXPictures` or `userXXXPicturesNumber`
+  Object.keys(localStorage)
+    .filter(
+      (key) =>
+        key.startsWith("user") &&
+        (key.endsWith("Pictures") || key.endsWith("PicturesNumber")),
+    )
+    .forEach((key) => {
+      localStorage.removeItem(key);
+    });
+  localStorage.setItem("version", CURRENT_CACHE_VERSION.toString());
+}