Function useLocalStorage

useLocalStorage<T>(
key: string,
initialValue: T,
): [T, (value: T | ((prev: T) => T)) => void]
Custom hook to sync state with localStorage

Business Perspective
Enables widgets to remember user preferences and settings across browser sessions, improving user experience by maintaining personalized configurations. This is particularly valuable for security officers who configure specific security levels and want their settings persisted. 💾

Technical Perspective
Provides a React state hook that automatically syncs with localStorage, handling JSON serialization/deserialization and SSR compatibility. Uses the same API as useState for familiarity.
Type Parameters
- T
  Type of the stored value
Parameters
- key: string
  localStorage key to use for storage
- initialValue: T
  Initial value if key doesn't exist in localStorage
Returns [T, (value: T | ((prev: T) => T)) => void]
Tuple of [storedValue, setValue] similar to useState
Example
```
// Store user's preferred theme
const [theme, setTheme] = useLocalStorage('theme', 'light');

return (
  <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
    Toggle Theme
  </button>
);
```
Example
```
// Store security level preferences
const [savedLevels, setSavedLevels] = useLocalStorage('securityLevels', {
  availability: 'Moderate',
  integrity: 'Moderate',
  confidentiality: 'Moderate'
});
```
Example
```
// Store widget visibility preferences
const [widgetPrefs, setWidgetPrefs] = useLocalStorage('widgetPreferences', {
  showDetails: true,
  expandedSections: ['overview', 'metrics']
});
```
- Defined in hooks/useLocalStorage.ts:55

Function useLocalStorage

Business Perspective

Technical Perspective

Type Parameters

Parameters

Returns [T, (value: T | ((prev: T) => T)) => void]

Example

Example

Example

Settings

On This Page