AsyncStorage and Local Data Storage

# CHAPTER 20

AsyncStorage and Local Data Storage #

1. Introduction #

2. Learning Objectives #

• Install and configure the @react-native-async-storage/async-storage package.

• Write Strings and JSON Objects to the physical hard drive.

• Read stored data asynchronously upon application startup.

• Delete and wipe stored preferences.

• Understand the security limitations of plain-text local storage.

3. What is AsyncStorage? #

• Key: "username" -> Value: "Alice"

• Key: "high_score" -> Value: "450"

*Important Rule: AsyncStorage can ONLY store Strings. You cannot store Integers, Booleans, or raw Objects directly. Everything must be stringified!*

4. Installation #

npx expo install @react-native-async-storage/async-storage

5. Saving Data (Writing to Disk) #

import AsyncStorage from '@react-native-async-storage/async-storage';

// Function to save a simple string
const saveThemePreference = async (value) => {
  try {
    // Requires a Key ('@theme') and a Value!
    await AsyncStorage.setItem('@theme', value);
    console.log("Theme saved successfully!");
  } catch (e) {
    console.error("Failed to save data to disk.");
  }
};

What if we want to save a complex Object (like a User Profile)? We MUST use JSON.stringify().

const saveUser = async (userObj) => {
  try {
    const jsonValue = JSON.stringify(userObj); // Convert Object to String
    await AsyncStorage.setItem('@user_profile', jsonValue);
  } catch (e) {
    console.error("Failed to save user object.");
  }
};

6. Loading Data (Reading from Disk) #

const loadThemePreference = async () => {
  try {
    const value = await AsyncStorage.getItem('@theme');
    
    if (value !== null) {
      console.log("Retrieved theme from disk:", value); // e.g., "dark"
      return value;
    } else {
      console.log("No theme saved yet. Defaulting to light.");
      return "light";
    }
  } catch (e) {
    console.error("Failed to fetch data.");
  }
};

When reading an Object, we MUST use JSON.parse() to turn the string back into usable JavaScript!

const loadUser = async () => {
  const jsonValue = await AsyncStorage.getItem('@user_profile');
  return jsonValue != null ? JSON.parse(jsonValue) : null;
};

7. Deleting Data #

const logOutUser = async () => {
  try {
    // Remove a specific key
    await AsyncStorage.removeItem('@user_profile');
    
    // OR: Wipe the ENTIRE storage clean! (Use with caution)
    // await AsyncStorage.clear(); 
    
    console.log("User logged out and data wiped.");
  } catch (e) {
    console.error("Failed to clear data.");
  }
};

8. Integrating with the UI (useEffect) #

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function NotesApp() {
  const [note, setNote] = useState('');

  // 1. Run ONCE when the app opens to load the saved note
  useEffect(() => {
    loadNote();
  }, []);

  const loadNote = async () => {
    const savedNote = await AsyncStorage.getItem('@my_note');
    if (savedNote) setNote(savedNote);
  };

  const saveNote = async () => {
    await AsyncStorage.setItem('@my_note', note);
    alert("Note saved permanently!");
  };

  return (
    <View style={{ padding: 50 }}>
      <Text style={{ fontSize: 20 }}>My Sticky Note:</Text>
      <TextInput 
        style={{ borderWidth: 1, padding: 10, marginVertical: 20 }}
        value={note}
        onChangeText={setNote}
      />
      <Button title="Save Note" onPress={saveNote} />
    </View>
  );
}

9. Common Mistakes #

• Storing Sensitive Data: AsyncStorage saves data in plain-text XML files on the phone. Do NOT store raw passwords, credit card numbers, or secure encryption keys here! A rooted/jailbroken phone can easily read these files. For highly sensitive data, use expo-secure-store, which encrypts the data using the native iOS Keychain and Android Keystore.

10. Best Practices #

• Define Keys as Constants: If you misspell '@user_profile' as '@userprofile' when trying to read the data, it will return null and drive you insane tracking down the bug. Always define your keys as constants at the top of an API file: export const KEYS = { USER_PROFILE: '@user_profile' }; and use AsyncStorage.getItem(KEYS.USER_PROFILE) to eliminate typo bugs.

11. Practice Exercises #

1. 1. What official package is required to save persistent Key-Value pairs to the mobile device's physical storage?

1. 2. What JavaScript function MUST be utilized before attempting to pass a complex Object (like { id: 1, name: 'Bob' }) into the AsyncStorage.setItem() method?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the mechanical flow of persisting and retrieving a complex JavaScript Object (e.g., a Shopping Cart Array) using AsyncStorage. Detail the serialization and deserialization steps required.

• Q: Contrast AsyncStorage with SecureStore (or react-native-keychain). What are the specific security implications of AsyncStorage, and what specific data types mandate the use of encrypted storage solutions?

• Q: Describe how you would utilize the useEffect hook in the root App.js component to check AsyncStorage for an existing authentication token to determine whether to route the user to the Login screen or the Home screen.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #