Step 5: Saving

Save boards to localStorage and manage multiple boards.

Where We Are

The board works, but everything disappears on refresh. Let's fix that.

Why localStorage

The browser's localStorage lets you save data that persists between page loads. No server needed. Perfect for a tool like this.

Save the Board

Save the board state to localStorage:
- Every time an item is added, deleted, or reordered, save the full board
- Store each item's type (color, image, text), its data, and its position
- Save automatically — no manual save button needed

Use JSON.stringify to store and JSON.parse to load.

Load on Startup

When the page loads, check localStorage for a saved board.
If one exists, restore all the items in their saved order.
If not, show the empty board.

Test Persistence

1. Add several items to the board
2. Rearrange them
3. Refresh the page
4. Everything should be exactly where you left it

Multiple Boards

Add support for multiple boards:
- A dropdown or sidebar that lists saved boards
- A "New Board" button that creates a blank board
- A way to name each board
- Switching between boards saves the current one first

Store all boards in localStorage under a single key,
with each board having a name and its items array.

Delete Boards

Add the ability to delete a board:
- A delete button next to each board name
- Confirm before deleting
- If you delete the current board, switch to another one
- Always keep at least one board

Checkpoint

• Board saves automatically to localStorage
• Board restores on page refresh
• Multiple boards can be created and named
• Switching between boards works
• Boards can be deleted

What You Learned

• localStorage API (setItem, getItem, removeItem)
• JSON serialization for complex data
• Auto-save patterns
• Managing state across multiple data sets

Exercises

1. Add the save and load prompts, then run the persistence test — add items, rearrange them, refresh, and confirm everything is exactly where you left it.
2. Build multiple-board support and create two named boards; switch between them and verify the current board saves before the switch (nothing should leak between boards).
3. Add board deletion and test the guardrails: confirm the delete prompt appears, that deleting the active board switches you to another, and that you can never end up with zero boards.