ag-beats/.context/Local Storage Autosave.md

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: ```

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