Membaca dan Menulis dengan AsyncStorage
Pasang @react-native-async-storage/async-storage, gunakan setItem dan getItem untuk menyimpan serta mendapatkan nilai rentetan dan kendalikan Promise yang dikembalikan dengan betul.
Membaca dan Menulis dengan AsyncStorage ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah AsyncStorage?
AsyncStorage ialah sistem penyimpanan pasangan kunci-nilai berterusan React Native. Sistem ini menyimpan data sebagai rentetan dalam sistem file setempat peranti, menjadikannya tersedia walaupun selepas aplikasi ditutup dan dibuka semula. Sistem ini berfungsi pada iOS dan Android serta menyokong sebarang nilai yang boleh disiri sebagai rentetan. Semua operasi adalah tak segerak dan mengembalikan Promise, jadi anda mesti menggunakan await padanya atau merangkaikannya dengan .then().
Memasang Pakej
Pakej AsyncStorage komuniti perlu dipasang secara berasingan dalam projek React Native dan Expo moden. Pakej ini tidak lagi disertakan bersama teras React Native. Gunakan npx expo install dan bukannya npm biasa supaya Expo memilih versi yang serasi dengan SDK anda.
npx expo install @react-native-async-storage/async-storageMenulis Data dengan setItem
AsyncStorage.setItem(key, value) menyimpan nilai rentetan pada kunci yang diberikan. Kedua-dua kunci dan nilai mestilah rentetan. Jika kunci tersebut sudah wujud, nilainya akan ditulis ganti. Sentiasa gunakan await pada panggilan ini dalam blok try-catch untuk mengendalikan kemungkinan ralat, seperti ruang storan peranti yang penuh.
import AsyncStorage from '@react-native-async-storage/async-storage';
async function saveUsername(username: string) {
try {
await AsyncStorage.setItem('username', username);
console.log('Saved successfully');
} catch (error) {
console.error('Failed to save username:', error);
}
}Membaca Data dengan getItem
AsyncStorage.getItem(key) mendapatkan nilai rentetan bagi kunci yang diberikan. Ia mengembalikan null jika kunci tersebut tidak wujud — kendalikan keadaan ini untuk mengelakkan ralat semasa masa jalan. Corak yang biasa digunakan ialah menyemak null dan menggunakan nilai lalai sebagai pilihan sandaran apabila aplikasi dilancarkan buat kali pertama.
async function loadUsername(): Promise<string> {
try {
const value = await AsyncStorage.getItem('username');
if (value !== null) {
return value;
}
return 'Guest'; // default when key does not exist
} catch (error) {
console.error('Failed to load username:', error);
return 'Guest';
}
}Mengalih Keluar Data dengan removeItem
AsyncStorage.removeItem(key) memadam entri bagi kunci yang diberikan daripada storan. Selepas dialih keluar, panggilan getItem untuk kunci tersebut mengembalikan null. Gunakannya apabila pengguna log keluar, menetapkan semula pilihan atau memadam akaun mereka — bila-bila masa anda perlu memadam data tersimpan tertentu tanpa mengosongkan semuanya.
async function clearSession() {
try {
await AsyncStorage.removeItem('authToken');
await AsyncStorage.removeItem('userId');
console.log('Session cleared');
} catch (error) {
console.error('Failed to clear session:', error);
}
}Memuatkan Data Semasa Aplikasi Bermula dengan useEffect
Corak yang biasa digunakan ialah memuatkan data berterusan ke dalam keadaan komponen apabila skrin dipasang. Gunakan useEffect dengan tatasusunan kebergantungan kosong supaya ia berjalan sekali sahaja semasa pemasangan. Tetapkan penanda pemuatan semasa data dimuatkan dan kosongkannya apabila pembacaan selesai supaya antara muka memaparkan pemutar pemuatan, bukannya kandungan kosong atau lapuk.
export default function SettingsScreen() {
const [theme, setTheme] = React.useState('light');
const [loading, setLoading] = React.useState(true);
useEffect(() => {
async function loadTheme() {
const saved = await AsyncStorage.getItem('theme');
if (saved) setTheme(saved);
setLoading(false);
}
loadTheme();
}, []);
if (loading) return <ActivityIndicator />;
return <Text>Current theme: {theme}</Text>;
}Operasi Kelompok dengan multiSet dan multiGet
Membaca atau menulis beberapa kunci dalam gelung adalah tidak cekap. Gunakan AsyncStorage.multiSet dan AsyncStorage.multiGet untuk menjalankan operasi kelompok dalam satu panggilan natif. multiSet menerima tatasusunan pasangan [key, value], manakala multiGet mengembalikan tatasusunan dalam format yang sama dengan nilai yang diperoleh.
// Write multiple keys in one call
await AsyncStorage.multiSet([
['theme', 'dark'],
['language', 'en'],
['fontSize', '16'],
]);
// Read multiple keys in one call
const pairs = await AsyncStorage.multiGet(['theme', 'language', 'fontSize']);
const settings = Object.fromEntries(pairs);
console.log(settings); // { theme: 'dark', language: 'en', fontSize: '16' }Menyenaraikan Semua Kunci
AsyncStorage.getAllKeys() mengembalikan tatasusunan setiap kunci yang sedang disimpan oleh aplikasi. Ini berguna untuk penyahpepijatan, membina skrin pengosongan cache atau membaca semua entri tanpa mengetahui kunci terlebih dahulu. Gabungkannya dengan multiGet untuk memuatkan keseluruhan kandungan storan sekaligus.
async function debugStorage() {
const keys = await AsyncStorage.getAllKeys();
console.log('All keys:', keys);
const pairs = await AsyncStorage.multiGet(keys);
pairs.forEach(([key, value]) => {
console.log(key, '->', value);
});
}Mengosongkan Semua Data dengan clear
AsyncStorage.clear() memadam semua kunci yang disimpan oleh aplikasi. Gunakan fungsi ini dengan berhati-hati — ia ialah operasi yang merosakkan tanpa fungsi buat asal terbina dalam. Fungsi ini sesuai untuk ciri tetapan semula kilang atau memadamkan semua data semasa pembangunan, tetapi jangan sekali-kali memanggilnya tanpa pengesahan pengguna yang jelas dalam aplikasi produksi.
async function factoryReset() {
Alert.alert('Reset App', 'This will delete all your data. Are you sure?', [
{ text: 'Cancel', style: 'cancel' },
{
text: 'Reset',
style: 'destructive',
onPress: async () => {
await AsyncStorage.clear();
navigation.reset({ index: 0, routes: [{ name: 'Onboarding' }] });
},
},
]);
}Amalan Terbaik Pengendalian Ralat
Operasi AsyncStorage boleh gagal apabila ruang storan peranti hampir habis atau apabila berlaku ralat jambatan natif. Sentiasa bungkus operasi membaca dan menulis dalam blok try-catch. Untuk pembacaan, kembalikan nilai lalai yang munasabah apabila berlaku ralat. Untuk penulisan, pertimbangkan untuk memasukkan penulisan ke dalam baris gilir supaya boleh dicuba semula kemudian, atau maklumkan pengguna bahawa tetapan mereka tidak dapat disimpan.
async function safeSave(key: string, value: string) {
try {
await AsyncStorage.setItem(key, value);
return true;
} catch (err) {
if (__DEV__) console.error('AsyncStorage write failed:', err);
// Optionally: show a Snackbar or Toast to the user
return false;
}
}Had dan Alternatif AsyncStorage
AsyncStorage direka untuk jumlah data yang kecil — pilihan pengguna, token dan tetapan mudah. Ia tidak sesuai untuk set data besar seperti imej, dokumen atau ribuan rekod; untuk keperluan tersebut, pertimbangkan SQLite melalui expo-sqlite. Perhatikan juga bahawa data AsyncStorage tidak disulitkan secara lalai, jadi gunakan Expo SecureStore untuk kelayakan sensitif.
Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.
Rumusan Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa setItem dan getItem ialah API teras AsyncStorage untuk menulis dan membaca nilai rentetan yang dikenal pasti melalui nama, multiSet dan multiGet mengumpulkan beberapa operasi ke dalam satu panggilan natif yang cekap, dan semakan null adalah penting kerana getItem mengembalikan null untuk kunci yang tidak pernah ditulis. Seterusnya, kita akan meneroka cara menyimpan dan menghuraikan objek JSON dalam AsyncStorage.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Membaca dan Menulis dengan AsyncStorage” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Membaca dan Menulis dengan AsyncStorage”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membaca dan Menulis dengan AsyncStorage”?
Pasang @react-native-async-storage/async-storage, gunakan setItem dan getItem untuk menyimpan serta mendapatkan nilai rentetan dan kendalikan Promise yang dikembalikan dengan betul. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Membaca dan Menulis dengan AsyncStorage” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Membaca dan Menulis dengan AsyncStorage
- Menyimpan dan Menghuraikan Objek JSON
- Membina Skrin Tetapan Berterusan
- Mengosongkan Stor dan Strategi Penghijrahan