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) { ... }
|
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
|
## 10. Authentication
|
||||||
|
|||||||
Reference in New Issue
Block a user