[TR] AsyncStorage React Native’de veri depolama ve yerel verilerin saklanması
AsyncStorage Nedir ?
Async Storage, React Native uygulamanız için asenkron, şifrelenmemiş, kalıcı, key-valuedepolama çözümüdür.
Telefonun hafızasını kullanarak bilgileri depolamamızı sağlar. Kullanıcı uygulamayı kapatsa dahi bu bilgiler silinmez, hatta kullanıcı cihazı kapattğında dahi silinmez ancak bu bilgileri silmek ister isek bunları belirli metodlar ile yapabiliyoruz.
AsyncStorage tıpkı web’deki localStorage gibi, verileri tıpkı localStorage gibi çalışmaktadır. Eğer daha önce localStorage ve sessionStorage kullandıysanız, AsyncStorage kullanımı daha kolay olacaktır.
🚀Bu Yazıdaki Konu Başlıkları şöyledir:
- AsyncStorage Nedir?
- Neden AsyncStorage?
- AsyncStorage Veri Türleri
- Temel Kavramlar Ve API Kullanımı
- Kullanım Senaryoları
- Performans Ve Güvenlik
Neden AsyncStorage ?
Verilerin depolanmasını ve kalıcı hale getirilmesini kolaylaştırır. Cihazın yerel depolama alanına veya karmaşık depolama sistemlerine ihtiyaç duymadan uygulamanızdaki basit küçük veri durumlarını işleyebilirsiniz.
Güvenilir olması nedeniyle fazla kullanılması, sürekli yeni güncellemeler ve hata düzeltmeleri yapılması.
AsyncStorage Veri Türleri Nelerdir ?
Genellikle string verilerin saklanması için tercih edilir, ancak JSON nesneleri gibi daha karmaşık veri yapılarını da depolamak mümkündür.
Bu nedenle string değilse verileri saklamadan önce her zaman serileştirmemiz gerekir. Bu, saklamadan önce veriyi string verisine dönüştürmemiz gerektiği anlamına gelir; burada, anahtar ve değerin her ikisi de string’tir.
Kaydetmek istediğimiz nesneyi bir dizeye dönüştürmek için JSON.Stringify() kullanırız. Verileri depodan geri aldığımız durumlarda, nesneye geri dönüştürmek için JSON.parse()işlevini kullanırız.
Temel Kavramlar Ve API Kullanımı
İlk olarak paketimizi npm ile yüklüyoruz, daha sonra import ediyoruz.
npm i @react-native-async-storage/async-storageimport AsyncStorage from '@react-native-async-storage/async-storage';Veri Depolama (Storing data)setItem() hem yeni data eklemek hem de mevcut datayı değiştirmek için kullanılır.
const storeData = async (value) => {
try {
await AsyncStorage.setItem('@my-key', value);
} catch (err) {
console.log("Error ",err)
}
};Veri Depolama (object)
const storeData = async (value) => {
try {
const jsonValue = JSON.stringify(value);
await AsyncStorage.setItem('@my-key', jsonValue);
} catch (err) {
console.log("Error ",err)
}
};Veri Okuma(Reading data)
const getData = async () => {
try {
const value = await AsyncStorage.getItem('@my-key');
if (value !== null) {
// value previously stored
}
} catch (err) {
console.log("Error ",err)
}
};Veri Okuma(Reading data object)
const getData = async () => {
try {
const jsonValue = await AsyncStorage.getItem('@my-key');
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch (err) {
console.log("Error ",err)
}
};AsyncStorage en sık kullanılan metodlargetItem, setItem, removeItem.
setItem:key-value çiftlerini kullanarak asenkron depolama alanında veri düzenler veya yeni veri depolar.getItem: Get kullanarak asenkron depolama alanından veri değerlerini alır.removeItem: Bir anahtar için öğeyi kaldırır.
Tüm API’ler şu şekilde:
- getItem
- setItem
- mergeItem
- removeItem
- getAllKeys
- multiGet
- multiSet
- multiMerge
- multiRemove
- clear
- useAsyncStorage
Temel Kullanım
Başlıca metodları kullanarak tek sayfalık basit bir anlatım hazırladım.
Kullanıcı bilgilerini Async Storage ile tutarak daha sonra uygulamaya giriş yaptığımızda verileri ekranda return ettiğimiz bir uykulama.
İlk olarak import ve type belirliyoruz.
import React, { useEffect } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
type UserData = {
name: string;
surname: string;
age: string;
email: string;
};Ardından state ve userDatayı tanımlıyoruz.
const [userInfo, setUserInfo] = React.useState<UserData | null>();
const userData: UserData = {
name: "Öztürk",
surname: "Şirin",
age: "22",
email: " ozturksirininfo@gmail.com",
};Ekranda 4 adet butonumuz var bunlar set, get, remove ve clear için aradaki fonksiyonları atlayıp ilk olarak bunun kodunu yazıyoruz.
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.btn}
onPress={() => storeUserData(userData)}>
<Text>SET-DATA</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={() => getUserData()}>
<Text>GET-DATA</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={() => removeUserData()}>
<Text>REMOVE-DATA</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={() => clearData()}>
<Text>CLEAR-DATA</Text>
</TouchableOpacity>
</View>
);Daha sonra fonksiyonlarımızı yazıyoruz.
const storeUserData = async (value: UserData) => {
try {
const jsonValue = JSON.stringify(value);
await AsyncStorage.setItem("@userData", jsonValue);
setUserInfo(value);
} catch (err) {
console.log(err as string);
}
};
const getUserData = async () => {
try {
const jsonValue = await AsyncStorage.getItem("@userData");
console.log("jsonValue", jsonValue);
setUserInfo(JSON.parse(jsonValue as string));
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch (err) {
console.log(err as string);
}
};
const removeUserData = async () => {
try {
await AsyncStorage.removeItem("@userData");
setUserInfo(null);
} catch (err) {
console.log(err as string);
}
};
const clearData = async () => {
try {
await AsyncStorage.clear();
} catch (err) {
console.log(err as string);
}
};
useEffect(() => {
getUserData();
}, [setUserInfo]);
<View style={styles.container}>
{userInfo && (
<View>
<Text>Name: {userInfo.name}</Text>
<Text>Surname: {userInfo.surname}</Text>
<Text>Age: {userInfo.age}</Text>
<Text>Email: {userInfo.email}</Text>
</View>
)}
<TouchableOpacity
style={styles.btn}
onPress={() => storeUserData(userData)}>
<Text>SET-DATA</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={() => getUserData()}>
<Text>GET-DATA</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={() => removeUserData()}>
<Text>REMOVE-DATA</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={() => clearData()}>
<Text>CLEAR-DATA</Text>
</TouchableOpacity>
</View>Daha fazlası için GitHub
Performans Ve Güvenlik
- AsyncStorage, basit veri depolama ihtiyaçları için uygundur. Ancak büyük veriler veya karmaşık verileri depolamak için uygun değildir.
- Büyük verileri depolamak performansı olumsuz etkileyebilir. AsyncStorage, verileri ana belleğe yükler ve bu nedenle büyük veriler depolamak uygulamanın tepki süresini etkileyebilir.
- AsyncStorage’i kullanırken veri depolama ve alım işlemlerini optimize etmek önemlidir. Sık sık veri depolamak veya almak yerine, gerekli olduğunda yapılmalıdır.
- AsyncStorage, verileri cihazın depolama alanında düz metin olarak sakladığı için hassas verileri (örneğin, kullanıcı oturum açma bilgileri veya şifreler) depolamak için uygun değildir.
- Hassas verileri depolamak için kullanılıyorsa, mutlaka verilerin kriptografik olarak şifrelenmesi gerekir. Bu, verilere yetkisiz erişimi önler ve güvenliği artırır.
- AsyncStorage, verileri cihazın yerel depolama alanında saklar. Bu nedenle, uygulama güncellemeleri veya cihaz yeniden başlatmaları gibi durumlarda veri kaybı riski vardır.
- AccessToken, kullanıcı oturumlarını yönetmek için kullanılan hassas bilgilerden biridir. AccessToken’ları AsyncStorage’de saklamak yerine, daha güvenli bir depolama mekanizması kullanmalısınız.
- AsyncStorage, geliştirme sırasında kullanıcı verilerini geçici olarak saklamak için uygundur ancak üretimde kullanılacaksa daha güvenli bir alternatif aramak önemlidir.
Sonuç olarak, AsyncStorage’i kullanırken performans ve güvenlik dengesini sağlayarak, önemli ve hassas bilgileri kullanmaya dikkat ederek ihtiyaçlarımıza göre kullanabiliriz ve günümüzde bir çok projede kullanılmakta.
⭐Önceki yazılarım
