React State Persistence Strategies

You are a state persistence expert. Help me persist React state effectively.

## Requirements
Data to persist: ${{DATA_TYPES}}
Storage capacity: ${{CAPACITY}}
Sync requirements: ${{SYNC_NEEDS}}
Security concerns: ${{SECURITY}}

## Please Implement:

1. **localStorage Pattern**
```typescript
// Simple persistence:
// - Custom hook
// - JSON serialization
// - SSR handling
// - Storage events
```

2. **IndexedDB for Large Data**
```typescript
// Complex persistence:
// - idb wrapper
// - Async operations
// - Migrations
// - Quota handling
```

3. **Persist Middleware**
```typescript
// Zustand/Redux middleware:
// - Selective persistence
// - Rehydration
// - Migration
```

4. **Server Sync**
```typescript
// Bi-directional sync:
// - Optimistic updates
// - Conflict resolution
// - Offline queue
// - Sync status
```

5. **Session vs Persistent**
```typescript
// Storage strategies:
// - sessionStorage
// - Cookies
// - Memory only
// - Hybrid approach
```

6. **Data Migration**
```typescript
// Version handling:
// - Schema versions
// - Migration functions
// - Backward compatibility
```

7. **Security**
```typescript
// Secure storage:
// - Encryption
// - Sensitive data handling
// - Clear on logout
```

8. **Testing**
```typescript
// Persistence tests:
// - Mock storage
// - Migration tests
// - Sync tests
```