تخزين البيانات باستخدام AsyncStorage في مكتبة React Native

 

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

أهلا و سهلا بكم اخواني الأعزاء، في هذه المقالة سنتطرق الى استخدام AsyncStorage في مكتبة React Native، اذا كنت جديداً معنا أنصحك بالعودة الى دروس سابقة لنمشي بخطوات مبسطة لنكمل المسيرة مع بعض و تكون فاهماً لهذه المقالة بحول الله. 

مقالة اليوم ستكون حول تخزين البيانات، يعني قاعدة بيانات مدمجة بالـ React تكون محلية ما تحتاج اتصال بالانترنت ولا أي شئ، فحاول أنك تركز معي قليلاً راح يكون الدرس يسير عليك اذا تببعتها خطوة خطوة.

AsyncStorage بهذا الاسم عبرة عن جافاسكربت كود و قاعدة بيانات بسيطة، غير مشفرة (UnEncrypted)، و غير متزامنة (Asynchronous) و مستمرة (Persistent). تشبه localStorage في تطبيقات Ionic. تحمل هذه الوظيفة قيمتين عند التخزين: المفتاح (key) و القيمة (value). و لديها نفس الأسلوب في التعامل مع البيانات : حفظ - استعادة - إزالة ( save | retrieve | remove ) .

 

• في تطبيقات iOS، الوظيفة AsyncStorage  يتم حفظ القيم الصغيرة في قاموس متسلسل (serialized dictionary)  بينما القيم الكبيرة يتم حفظها في ملف ملفات منفصلة عن التطبيق.
• و في الأندرويد Android، الوظيفة AsyncStorage تستخدم إما RocksDB أو SQLite المعروفين استنادا إلى ما هو متاح.

 

AsyncStorage تمكنك من استعمال أسلوبين مختلفين، الأول يدعى بـ (Persisting data) و - هي الموصى بها غالباً - : 

 

try {
  await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
} catch (error) {
  // Error saving data
}

• و الثانية تدعى بـ (Fetching data) :

try {
  const value = await AsyncStorage.getItem('@MySuperStore:key');
  if (value !== null){
    // We have data!!
    console.log(value);
  }
} catch (error) {
  // Error retrieving data
}

 

بحكم أننا سنستعمل الطريقة الموصى بها و نتعامل معها الآن، الأسلوب الأول (AsyncStorage.setItem) و التي أرفقناها بالدالة setItem تحمل المفتاح و قيمته:

 

try {
  await AsyncStorage.setItem('@MySuperStore:key', 'hi there');
} catch (error) {
  // Error saving data
  console.log(error);
}

 

و لاسترجاع البيانات (Retrieving data) نستخدم الأسلوب (AsyncStorage.getItem) :

 

try {
  const value = await AsyncStorage.getItem('@MySuperStore:key');
  console.log(value); // hi there
} catch (error) {
  console.log(error);
}

 

و ان أردنا حذف المفتاح و قيمته المحفوظين (Remove saved key) :

 

try {
  await AsyncStorage.removeItem('@MySuperStore:key');
} catch (error) {
  console.log(error);
}

 

و هذا مثال كامل من موقع توتوريال أعجبني نستخدم فيه خاصية التخزين عبر المكوّن الجديد (TextInput) : 

 

import React, { Component } from 'react'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'

class AsyncStorageExample extends Component {
   state = {
      'name': ''
   }
   componentDidMount = () => AsyncStorage.getItem('name').then((value)  => this.setState({ 'name': value }))

   setName = (value) =>{
      AsyncStorage.setItem('name', value);
      this.setState({ 'name': value });
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.textInput} autoCapitalize = 'none' 
               onChangeText = {this.setName}/>
            <Text>
               {this.state.name}
            </Text>
         </View>
      )
   }
}
export default AsyncStorageExample

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
   textInput: {
      margin: 15,
      height: 35,
      borderWidth: 1,
      backgroundColor: '#7685ed'
   }
})

 

لنقم بتشغيل تطبيقنا و نلاحظ: 

 

للتحقق من استمرار البيانات في التطبيق و لم تحذف، فقط قم إعادة تحميل جهاز المحاكاة. سيظل النص ظاهراً و باقياً : 

 

 

نصل الى نهاية درس اليوم، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا.

 

كلمات دليلية: react rn رياكت رياكت نيتف