Why local data enables offline functionality in iOS Swift - Build It to Prove It

Build: Offline Notes

This screen lets users write and save notes locally on their device so they can access them even without internet.

Target UI

-------------------------
|      Offline Notes     |
|-----------------------|
| [TextView for typing] |
|                       |
| [Save Button]         |
-------------------------

A large text area for typing notes

A Save button that stores the note locally on the device

When the app restarts, the saved note should load and show in the text area

No internet connection needed to save or load notes

Starter Code

iOS Swift

import SwiftUI

struct OfflineNotesView: View {
    @State private var noteText: String = ""

    var body: some View {
        VStack {
            TextEditor(text: $noteText)
                .padding()
                .border(Color.gray, width: 1)
                .frame(height: 300)

            Button("Save") {
                // TODO: Save noteText locally
            }
            .padding()
        }
        .padding()
        .onAppear {
            // TODO: Load saved noteText locally
        }
    }
}

struct OfflineNotesView_Previews: PreviewProvider {
    static var previews: some View {
        OfflineNotesView()
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct OfflineNotesView: View {
    @State private var noteText: String = ""
    private let noteKey = "savedNote"

    var body: some View {
        VStack {
            TextEditor(text: $noteText)
                .padding()
                .border(Color.gray, width: 1)
                .frame(height: 300)

            Button("Save") {
                UserDefaults.standard.set(noteText, forKey: noteKey)
            }
            .padding()
        }
        .padding()
        .onAppear {
            if let savedNote = UserDefaults.standard.string(forKey: noteKey) {
                noteText = savedNote
            }
        }
    }
}

struct OfflineNotesView_Previews: PreviewProvider {
    static var previews: some View {
        OfflineNotesView()
    }
}

This app uses UserDefaults to save and load the note text locally on the device. When the user taps the Save button, the current text is stored under a key. When the view appears, it checks if a saved note exists and loads it into the text editor. This local storage means the note is available even without internet, enabling offline functionality.

UserDefaults is a simple way to store small pieces of data persistently on iOS devices. It works like a small local database that the app can read and write anytime.

Final Result

Completed Screen

-------------------------
|      Offline Notes     |
|-----------------------|
| This is my saved note |
| that I can read even  |
| without internet.     |
|                       |
| [Save Button]         |
-------------------------

User types text in the large text area.

User taps Save button to store the note locally.

When the app restarts or the screen reloads, the saved note automatically appears in the text area.

All actions work without internet connection.

Stretch Goal

Add a Clear button to erase the saved note and clear the text area.

💡 Hint

Use UserDefaults.removeObject(forKey:) to delete the saved note and set noteText to an empty string.