Data Persistence

Apps that remember things need to store data somewhere. This guide covers the options and when to use each.

Do You Need Persistence?

Yes, if:

• User creates content (notes, projects, settings)
• App should remember state between sessions
• Data needs to sync across devices
• Multiple users share data

No, if:

• App is a stateless tool
• User starts fresh each time
• No personalization needed

Local Storage Options

Web: localStorage

Simple key-value storage in the browser.

Save the user's preferences to localStorage.
Load them when the app starts.

Good for:

• User preferences
• Draft content
• UI state (sidebar open/closed)

Limitations:

• 5MB limit
• Only strings (JSON.stringify for objects)
• Cleared if user clears browser data

macOS: UserDefaults

Apple's built-in preferences system.

Save the user's settings to UserDefaults.
Load them when the app launches.

Good for:

• App preferences
• Simple data
• Settings that should persist

iOS: Same as macOS

UserDefaults works the same way.

All platforms: File system

Save data as files.

Save the document to a file.
Let the user choose the save location.

When to Use a Database

Signs you need one:

• Multiple users with their own data
• Data needs to sync across devices
• Complex queries or relationships
• Data is larger than a few MB

Types of databases:

Relational (SQL)

• Structured data in tables
• PostgreSQL, MySQL, SQLite
• Good for: structured, related data

Document (NoSQL)

• Flexible JSON-like documents
• MongoDB, Firestore
• Good for: varied data shapes

Key-value

• Simple key → value lookup
• Redis
• Good for: caching, sessions

Easy Database Options

Supabase

PostgreSQL with a nice interface.

Set up Supabase for this project.
Create a table for [data type].
Add functions to read and write [data].

Includes:

• Database
• Authentication
• Real-time subscriptions
• File storage

Firebase Firestore

Google's document database.

Set up Firestore for this project.
Create a collection for [data type].

Includes:

• NoSQL database
• Real-time sync
• Offline support
• Authentication

PlanetScale

Serverless MySQL.

Choosing Storage

Data Patterns

Loading data on app start

When the app starts, load the user's [data] from [storage].
Show a loading state while fetching.

Saving on change

Auto-save [content] whenever it changes.
Show a "Saving..." indicator briefly.

Syncing across devices

Sync the user's [data] across devices using [Supabase/Firebase].
Handle conflicts by using the most recent change.

Offline support

Cache [data] locally so the app works offline.
Sync changes when connection is restored.

CRUD Operations

Create

Add a form to create new [items].
Save to [storage] when submitted.

Read

Load all [items] and display them in a list.
Show loading state while fetching.

Update

Allow editing [items].
Save changes to [storage].

Delete

Add delete functionality with confirmation.
Remove from [storage] when confirmed.

Data Structure

Planning your data

Before implementing, think about:

• What data do you need to store?
• How are pieces related?
• What queries will you run?

Example: Notes app

Data structure for notes:
- Note: id, title, content, createdAt, updatedAt, userId
- Users have many notes
- Notes belong to one user

Example: Task manager

Data structure for tasks:
- Task: id, title, completed, dueDate, projectId, userId
- Project: id, name, userId
- Users have many projects
- Projects have many tasks

Debugging Data Issues

Data not saving

Changes aren't being saved to [storage].
Here's what I'm trying: [describe]
Here's the error: [paste if any]

Data not loading

The app starts but data doesn't load.
[Describe what happens]

Sync issues

Data on one device isn't showing on another.
[Describe the sync setup]

What You'll Learn

• When you need data persistence
• Local storage options by platform
• When to use a database
• Easy database services
• Common data patterns
• CRUD operations

Exercises

1. Add a small preference (like a theme choice or sidebar state) to localStorage or UserDefaults, then reload the app to confirm it persists.
2. Plan the data structure for a simple app idea (notes or tasks) using the "Planning your data" questions, then write it out in the example format shown above.
3. Build full CRUD for one item type against Supabase or Firebase using the CRUD prompts, including a delete-with-confirmation step.