diff --git a/Docs/Web-Development.md b/Docs/Web-Development.md index 708bebf..77c315f 100644 --- a/Docs/Web-Development.md +++ b/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