40 lines
1.0 KiB
Markdown
40 lines
1.0 KiB
Markdown
### Local Storage Autosave
|
||
|
||
#### ✅ Behavior
|
||
|
||
- All local state changes (either **user-made** or **received from others**) are autosaved into local storage under the key `Autosaved Session`.
|
||
|
||
- Throttle or debounce autosaving to reduce performance overhead.
|
||
- **Delay** of `750–1500ms` is typically ideal — tweak based on UX feedback.
|
||
- Wrap autosave logic in a `useEffect` (for React) that depends on your state.
|
||
- **Cancel debounce** on unmount to avoid memory leaks:
|
||
```
|
||
```ts
|
||
useEffect(() => {
|
||
return () => debouncedAutosave.cancel();
|
||
}, []);
|
||
|
||
```
|
||
|
||
#### 🔁 Autosave Trigger Events
|
||
|
||
- State change from user interaction
|
||
|
||
- State update from WebSocket messages
|
||
|
||
- After loading a saved session (explained further below)
|
||
|
||
|
||
#### 🧠 Decision Logic on Load
|
||
|
||
1. **New session**:
|
||
|
||
- Start with default state
|
||
|
||
- Autosave begins immediately
|
||
|
||
2. **Join existing session**:
|
||
|
||
- Request full state from server
|
||
|
||
- Begin autosaving once session state is received and applied |