RN Lez 22: AsyncStorage

Docs: AsyncStorage

Obiettivi

• Salvare dati persistenti con AsyncStorage
• Caricare dati all’avvio
• Creare una Todo List persistente

---

1. AsyncStorage

AsyncStorage salva dati in modo persistente sul telefono.

Setup

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

Funzioni base

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

// Salvare (solo stringhe! usa JSON.stringify)
const salva = async (chiave: string, valore: any) => {
    try {
        const json = JSON.stringify(valore);
        await AsyncStorage.setItem(chiave, json);
        return true;
    } catch (e) {
        console.error('Errore salvataggio:', e);
        return false;
    }
};

// Caricare
const carica = async (chiave: string) => {
    try {
        const json = await AsyncStorage.getItem(chiave);
        return json ? JSON.parse(json) : null;
    } catch (e) {
        console.error('Errore caricamento:', e);
        return null;
    }
};

---

2. Pattern: useEffect per persistenza

const CHIAVE = '@todo_list';

export default function App() {
    const [tasks, setTasks] = useState<Task[]>([]);
    const [pronto, setPronto] = useState(false);

    // All'avvio: carica dati
    useEffect(() => {
        const init = async () => {
            const salvati = await AsyncStorage.getItem(CHIAVE);
            if (salvati) setTasks(JSON.parse(salvati));
            setPronto(true);
        };
        init();
    }, []);

    // A ogni modifica: salva (solo dopo il primo caricamento)
    useEffect(() => {
        if (pronto) {
            AsyncStorage.setItem(CHIAVE, JSON.stringify(tasks));
        }
    }, [tasks, pronto]);

    // ...
}

---

3. Todo List persistente

type Task = {
    id: string;
    testo: string;
    fatto: boolean;
};

export default function App() {
    const [task, setTask] = useState('');
    const [tasks, setTasks] = useState<Task[]>([]);
    const [pronto, setPronto] = useState(false);

    useEffect(() => {
        AsyncStorage.getItem('@todo').then(json => {
            if (json) setTasks(JSON.parse(json));
            setPronto(true);
        });
    }, []);

    useEffect(() => {
        if (pronto) AsyncStorage.setItem('@todo', JSON.stringify(tasks));
    }, [tasks, pronto]);

    const aggiungi = () => {
        if (!task.trim()) return;
        setTasks([...tasks, { id: Date.now().toString(), testo: task, fatto: false }]);
        setTask('');
    };

    const toggle = (id: string) => {
        setTasks(tasks.map(t => t.id === id ? { ...t, fatto: !t.fatto } : t));
    };

    const elimina = (id: string) => {
        setTasks(tasks.filter(t => t.id !== id));
    };

    return (
        <View style={styles.container}>
            <Text style={styles.titolo}>✅ Todo List</Text>
            <View style={styles.form}>
                <TextInput style={styles.input} value={task}
                    onChangeText={setTask} placeholder="Nuovo task..."
                    onSubmitEditing={aggiungi}
                />
                <Button title="+" onPress={aggiungi} />
            </View>
            <FlatList data={tasks} renderItem={({ item }) => (
                <TouchableOpacity style={styles.item} onPress={() => toggle(item.id)}
                    onLongPress={() => elimina(item.id)}>
                    <Text style={[styles.testo, item.fatto && styles.fatto]}>
                        {item.testo}
                    </Text>
                </TouchableOpacity>
            )} keyExtractor={item => item.id} />
        </View>
    );
}

---

4. Operazioni aggiuntive

// Eliminare una chiave
await AsyncStorage.removeItem('@chiave');

// Cancellare TUTTO
await AsyncStorage.clear();

// Ottenere tutte le chiavi
const keys = await AsyncStorage.getAllKeys();

---

5. Tabella riassuntiva

Operazione	Codice
Salvare	AsyncStorage.setItem(key, JSON.stringify(val))
Caricare	JSON.parse(await AsyncStorage.getItem(key))
Eliminare	AsyncStorage.removeItem(key)
Cancellare tutto	AsyncStorage.clear()

---

6. Esercizio

🎯 “Diario personale”

Crea un’app diario che:

1. Form: titolo + testo + bottone “Salva”
2. Data automatica (new Date().toLocaleDateString('it-IT'))
3. AsyncStorage per persistenza
4. FlatList per mostrare post (titolo + data)
5. TouchableOpacity per leggere post completo (Alert)
6. Long-press per eliminare