Document storage key registry pattern in Web-Development
Add "Storage Key Registry" subsection explaining: - Centralize all storage keys in utils/constants.ts - Never hard-code storage key strings in components - Document storage type and purpose with JSDoc - Include code examples for correct usage Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user