2 min read
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
- Add several items to the board
- Rearrange them
- Refresh the page
- 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 boardCheckpoint
- 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