feat: automatic localstorage cleaning

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

@@ -3,6 +3,7 @@ import Alpine from "alpinejs";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import htmx from "htmx.org";
 import { limitedChoices } from "#core:alpine/limited-choices";
+import { cacheBuster } from "#core:core/cache";
 import { default as navbar } from "#core:core/navbar";
 import { alpinePlugin as notificationPlugin } from "#core:utils/notifications";
 
@@ -41,3 +42,8 @@ Object.assign(window, { htmx });
  * navbar
  */
 navbar();
+
+/**
+ * Script that clears the cache when the cache version changes
+ */
+cacheBuster();

core/static/bundled/core/cache.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());
+}