Docs/Web-Development.md

@@ -935,6 +935,32 @@ const MAX_VISIBLE_BANS = 50;
 if (data.length > MAX_VISIBLE_BANS) { ... }
 ```
 
+### Storage Key Registry
+
+Browser storage keys (localStorage, sessionStorage) are global namespace singletons. To prevent typos, collisions, and drift across the codebase, **all storage keys must be centralized in `utils/constants.ts`** with descriptive constant names.
+
+**Rules:**
+- Never hard-code storage key strings in components, hooks, or providers.
+- Define storage keys in `utils/constants.ts` with clear names (e.g., `STORAGE_KEY_AUTHENTICATED`, `STORAGE_KEY_SIDEBAR_COLLAPSED`).
+- Add JSDoc comments documenting which storage type (sessionStorage vs localStorage) and the purpose.
+- Import the constant where needed; never create local variables for the same key string.
+
+```ts
+// utils/constants.ts
+/** SessionStorage key for authentication state persistence. */
+export const STORAGE_KEY_AUTHENTICATED = "bangui_authenticated" as const;
+
+/** LocalStorage key for sidebar collapsed state. */
+export const STORAGE_KEY_SIDEBAR_COLLAPSED = "bangui_sidebar_collapsed" as const;
+```
+
+```tsx
+// providers/AuthProvider.tsx
+import { STORAGE_KEY_AUTHENTICATED } from "../utils/constants";
+
+const stored = sessionStorage.getItem(STORAGE_KEY_AUTHENTICATED);
+```
+
 ---
 
 ## 10. Authentication