Storage Utilities
Relevant source files
The following files were used as context for generating this wiki page:
Storage Utilities provide a consistent interface for interacting with browser-based persistence layers, primarily localStorage and sessionStorage. These utilities manage user preferences such as theme modes and font pairings across sessions.
The system handles environments where storage might be blocked or unavailable by wrapping native calls in protective logic. This ensures the application remains functional even if persistent storage fails.
Sources: src/utils/storage.ts, src/utils/storage.test.ts:35-85
Architecture and Data Flow
The storage system uses a functional approach to wrap standard Web Storage API methods. This abstraction layer prevents runtime errors during server-side rendering (SSR) or in browsers with restricted privacy settings.
The diagram shows how storage utilities intercept application requests to provide safe access to the browser's persistent storage.
Sources: src/utils/storage.ts, src/utils/storage.test.ts:35-85
Core API Methods
The utility module exports four primary functions to manage data. These functions specifically target localStorage but can be adapted for other storage types.
| Function | Action | Parameters | Return Value |
|---|---|---|---|
getStorageItem | Retrieves a value | key: string | string | null |
setStorageItem | Persists a value | key: string, value: string | void |
removeStorageItem | Deletes a value | key: string | void |
getStorageKeys | Lists all keys | None | string[] |
Sources: src/utils/storage.ts, src/utils/storage.test.ts:3-5
Key Usage Patterns
Preference Persistence
The application uses storage utilities to maintain user interface settings. This includes the selected theme (light or dark) and specific font pairings.
The sequence diagram illustrates the flow of user preference data from the UI through the utilities to the browser storage.
Sources: src/components/Settings/Font/font.test.ts:98-106, src/components/Settings/ThemeMode/theme-mode.test.ts:68-73
End-to-End Testing Integration
Testing fixtures utilize storage keys to seed initial states. This allows tests to verify behavior under specific configurations, such as forcing a "dark" theme before the page loads.
- Theme Seeding: Uses
sessionStorageto lock a theme choice during a test session to prevent UI overrides. - Verification: Page objects evaluate the storage state to confirm that user actions (like toggling a font) resulted in correct persistence.
Sources: e2e/pages/base.page.ts:25-42, e2e/pages/base.page.ts:50-55
Configuration and Keys
The system centralizes storage identifiers in a STORAGE_KEYS object to prevent naming collisions and ensure consistency across the codebase.
| Key | Purpose | Used In |
|---|---|---|
font | Stores the active font pairing ID | src/components/Settings/Font |
themeMode | Stores the user's color preference (light/dark) | src/components/Settings/ThemeMode |
Sources: src/components/Settings/Font/font.test.ts:7-13, e2e/pages/base.page.ts:6-10
Summary
Storage Utilities provide a robust, fault-tolerant wrapper for browser storage. By abstracting native localStorage calls, the project ensures a stable user experience across different browser configurations while centralizing the management of UI preferences like fonts and themes.