El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

AsyncStorage per a dades locals

Següent ►
►

Introducció

En aquest tema, aprendrem a utilitzar AsyncStorage per emmagatzemar dades locals en una aplicació React Native. AsyncStorage és una API asíncrona, no xifrada i persistent que permet emmagatzemar dades en format clau-valor. És útil per guardar configuracions, preferències d'usuari o qualsevol altra informació que necessiti ser persistent entre sessions.

Objectius

  • Comprendre què és AsyncStorage i per a què serveix.
  • Aprendre a utilitzar les funcions bàsiques de AsyncStorage per guardar, recuperar i eliminar dades.
  • Implementar exemples pràctics per reforçar els conceptes apresos.

Instal·lació

Per utilitzar AsyncStorage, primer hem d'instal·lar el paquet corresponent. Pots fer-ho amb npm o yarn:

npm install @react-native-async-storage/async-storage

o

yarn add @react-native-async-storage/async-storage

Després d'instal·lar el paquet, assegura't de vincular-lo correctament si estàs utilitzant una versió de React Native anterior a 0.60:

react-native link @react-native-async-storage/async-storage

Funcions Bàsiques

Guardar Dades

Per guardar dades, utilitzem la funció setItem. Aquesta funció accepta una clau i un valor, ambdós en format de cadena de text.

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

const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
    console.log('Dades guardades correctament');
  } catch (e) {
    console.error('Error guardant les dades', e);
  }
};

Recuperar Dades

Per recuperar dades, utilitzem la funció getItem. Aquesta funció accepta una clau i retorna el valor associat a aquesta clau.

const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      console.log('Dades recuperades:', value);
      return value;
    }
  } catch (e) {
    console.error('Error recuperant les dades', e);
  }
};

Eliminar Dades

Per eliminar dades, utilitzem la funció removeItem. Aquesta funció accepta una clau i elimina el valor associat a aquesta clau.

const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
    console.log('Dades eliminades correctament');
  } catch (e) {
    console.error('Error eliminant les dades', e);
  }
};

Exemple Pràctic

A continuació, implementarem un exemple pràctic que utilitza AsyncStorage per guardar, recuperar i eliminar el nom d'un usuari.

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

const App = () => {
  const [name, setName] = useState('');
  const [storedName, setStoredName] = useState('');

  const saveName = async () => {
    await storeData('user_name', name);
    setName('');
  };

  const loadName = async () => {
    const name = await getData('user_name');
    setStoredName(name);
  };

  const deleteName = async () => {
    await removeData('user_name');
    setStoredName('');
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Escriu el teu nom"
        value={name}
        onChangeText={setName}
        style={{ borderBottomWidth: 1, marginBottom: 20 }}
      />
      <Button title="Guardar Nom" onPress={saveName} />
      <Button title="Carregar Nom" onPress={loadName} />
      <Button title="Eliminar Nom" onPress={deleteName} />
      {storedName ? <Text>Nom guardat: {storedName}</Text> : null}
    </View>
  );
};

export default App;

Exercicis Pràctics

Exercici 1: Guardar i Recuperar Preferències d'Usuari

  1. Crea una aplicació que permeti a l'usuari guardar les seves preferències de tema (clar o fosc) utilitzant AsyncStorage.
  2. Implementa una funció per recuperar aquestes preferències quan l'aplicació es carrega.

Exercici 2: Llista de Tasques

  1. Crea una aplicació de llista de tasques on les tasques es guardin localment utilitzant AsyncStorage.
  2. Implementa funcions per afegir, eliminar i marcar tasques com a completades.

Solucions

Solució Exercici 1

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

const App = () => {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const loadTheme = async () => {
      const savedTheme = await getData('app_theme');
      if (savedTheme) {
        setTheme(savedTheme);
      }
    };
    loadTheme();
  }, []);

  const toggleTheme = async () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    await storeData('app_theme', newTheme);
  };

  return (
    <View style={{ padding: 20, backgroundColor: theme === 'light' ? '#fff' : '#333', flex: 1 }}>
      <Text style={{ color: theme === 'light' ? '#000' : '#fff' }}>Tema actual: {theme}</Text>
      <Button title="Canviar Tema" onPress={toggleTheme} />
    </View>
  );
};

export default App;

Solució Exercici 2

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

const App = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const loadTasks = async () => {
      const savedTasks = await getData('tasks');
      if (savedTasks) {
        setTasks(JSON.parse(savedTasks));
      }
    };
    loadTasks();
  }, []);

  const addTask = async () => {
    const newTasks = [...tasks, { id: Date.now().toString(), text: task, completed: false }];
    setTasks(newTasks);
    await storeData('tasks', JSON.stringify(newTasks));
    setTask('');
  };

  const toggleTaskCompletion = async (id) => {
    const newTasks = tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task);
    setTasks(newTasks);
    await storeData('tasks', JSON.stringify(newTasks));
  };

  const deleteTask = async (id) => {
    const newTasks = tasks.filter(task => task.id !== id);
    setTasks(newTasks);
    await storeData('tasks', JSON.stringify(newTasks));
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Escriu una tasca"
        value={task}
        onChangeText={setTask}
        style={{ borderBottomWidth: 1, marginBottom: 20 }}
      />
      <Button title="Afegir Tasca" onPress={addTask} />
      <FlatList
        data={tasks}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <TouchableOpacity onPress={() => toggleTaskCompletion(item.id)}>
              <Text style={{ textDecorationLine: item.completed ? 'line-through' : 'none' }}>{item.text}</Text>
            </TouchableOpacity>
            <Button title="Eliminar" onPress={() => deleteTask(item.id)} />
          </View>
        )}
      />
    </View>
  );
};

export default App;

Conclusió

En aquest tema, hem après a utilitzar AsyncStorage per emmagatzemar dades locals en una aplicació React Native. Hem vist com guardar, recuperar i eliminar dades, i hem implementat exemples pràctics per reforçar els conceptes apresos. AsyncStorage és una eina poderosa per gestionar dades locals i pot ser molt útil en diverses situacions dins d'una aplicació mòbil.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats