ما هو AsyncStorage في React Native وكيفية استخدامه؟

يجعل AsyncStorage الخاص بـ React Native تخزين البيانات واستمرارها في تطبيق React Native أمرًا بسيطًا. باستخدام AsyncStorage API ، يمكنك التعامل مع حالات بسيطة من البيانات الصغيرة داخل تطبيقك دون الحاجة إلى التخزين المحلي للجهاز أو أنظمة التخزين المعقدة.

ما هو تخزين AsyncStorage الخاص بـ React Native؟

واجهة برمجة تطبيقات AsyncStorage عبارة عن نظام تخزين ذي قيمة رئيسية ثابتة. تدعم واجهة برمجة التطبيقات نطاقًا من أنواع بيانات JavaScript، بما في ذلك كائنات السلسلة و boolean و number و JSON.

تستمر البيانات المخزنة باستخدام AsyncStorage وستظل متاحة حتى في حالة إغلاق التطبيق أو إعادة تشغيل الجهاز. هذا يجعل AsyncStorage حل تخزين مثاليًا للتخزين المؤقت للبيانات وتخزين كميات صغيرة من حالة التطبيق.

ما هي مشكلة حل AsyncStorage؟

قبل ظهور AsyncStorage ، كان التخزين المؤقت للبيانات جهدًا غير موثوق به. يمكنك إما تخزين البيانات في التخزين المحلي ، وهو غير قادر على الاحتفاظ بالبيانات عند إغلاق التطبيق الخاص بك ، أو يمكنك تخزين البيانات في نظام إدارة قواعد البيانات العلائقية (RDBMS). لكنها معقدة للغاية بحيث لا يمكن تشغيلها في حالة الاستخدام هذه.

يحل AsyncStorage هذه المشكلات من خلال توفير طريقة بسيطة وموثوقة لتخزين البيانات الصغيرة والمؤقتة في تطبيقات React Native.

لتخزين البيانات باستخدام AsyncStorage ، يتم أولاً تحويل البيانات إلى سلسلة JSON. ثم يتم تخزين سلسلة JSON في نظام قيم المفتاح. عند محاولة استرداد البيانات من AsyncStorage ، يتم إلغاء تسلسل البيانات من JSON ثم إعادتها إليك بتنسيقها الأصلي.

هؤلاء هم البرامج غير المتزامنة التي تعمل دون حظر سلسلة جافا سكريبت الرئيسية. مما يجعلها مثالية لتخزين البيانات التي تحتاج إلى وصول متكرر ، مثل إعدادات المستخدم وحالة التطبيق.

طرق التخزين غير المتزامن

لتثبيت ملف تفاعل - أصلي - غير متزامن - تخزين package ، قم بتشغيل الأمر التالي داخل المحطة الطرفية لمشروعك:

npm install @ reaction-native-async-storage / التخزين غير المتزامن

نظرًا لأن AsyncStorage غير متزامن بطبيعته ، فلن تعرض طرقه النتائج على الفور. وبدلاً من ذلك ، فإنهم يعيدون الوعد الذي يحسم عندما تكتمل العملية.

يجب عليك استخدام ملف غير متزامن / انتظار بناء الجملة أو تقنية مشابهة عند استدعاء طرق AsyncStorage.

اكتب البيانات باستخدام أساليب setItem () و multiSet ()

ال setItem () و متعدد () الطرق المستخدمة لتعيين القيم للمفتاح المحدد. تقبل هذه الطرق المفتاح والقيم كمعلمات.

ستعيد الطريقة وعدًا يتم حله بقيمة منطقية تشير إلى ما إذا كانت العملية ناجحة أم أنها مرفوضة مع وجود خطأ إذا فشلت العملية:

// حفظ قيمة للمفتاح "المستخدم"
انتظر AsyncStorage.setItem ('مستخدم', 'جون');
// حفظ قيم متعددة للمفتاح "المستخدم"
انتظر AsyncStorage.multiSet (['مستخدم', 'جون', "ظبية"]);

اقرأ البيانات باستخدام أساليب getItem () و multiGet ()

مع ال تحصل على البند() الطريقة ، يمكنك سحب البيانات المحفوظة من التخزين باستخدام مفتاح القيمة التي تريد الحصول عليها. إذا كان المفتاح الذي تم تمريره غير موجود ، فسيتم رفض الوعد بخطأ:

مقدار ثابت الاسم = انتظر AsyncStorage.getItem ('مستخدم');

القيمة التي تم إرجاعها بواسطة تحصل على البند() عبارة عن سلسلة. إذا كنت بحاجة إلى تخزين البيانات بتنسيق آخر ، فيمكنك استخدام JSON.stringify () لتحويل البيانات إلى سلسلة قبل تخزينها. ثم استخدام JSON.parse () لتحويل السلسلة إلى نوع البيانات الأصلي عند استرجاعها.

على سبيل المثال:

// احفظ الكائن {name: "John Doe" ، العمر: 30} للمفتاح "user"
انتظر AsyncStorage.setItem ('مستخدم', جسون.stringify ({اسم: "فلان الفلاني", عمر: 30}));
// احصل على كائن للمفتاح "user"
مقدار ثابت المستخدم = جسون.parse (انتظر AsyncStorage.getItem ('مستخدم'));

يمكنك أيضًا استخدام ملف مولتي جيت () طريقة لسحب أزواج متعددة من المفاتيح والقيمة. تأخذ العملية مصفوفة من المفاتيح التي يجب أن تكون سلاسل.

دمج البيانات باستخدام أساليب mergeItem () و multiMerge ()

ال mergeItem () و متعدد الدمج () تدمج الطرق القيمة المحددة مع القيمة الحالية للمفتاح المحدد. القيمة التي تم تمريرها إلى mergeItem () يمكن أن يكون أي نوع من البيانات. ومع ذلك ، من المهم ملاحظة أن AsyncStorage لا يقوم بتشفير البيانات ، لذلك يمكن لأي شخص لديه حق الوصول إلى الجهاز قراءة البيانات:

انتظر AsyncStorage.mergeItem ('اسم', 'جين دو');

mergeItem () يأخذ مفتاح القيمة التي تريد دمجها والقيمة الجديدة التي تريد دمجها مع القيمة الحالية للمفتاح. يستخدم متعدد الدمج () لدمج أكثر من عنصر في قيمة أساسية.

امسح التخزين باستخدام طريقة clear ()

ال واضح() تسمح لك الطريقة بإزالة جميع العناصر المخزنة في AsyncStorage. يمكن أن يكون مفيدًا في سيناريوهات مختلفة ، مثل عندما تحتاج إلى إعادة تعيين حالة التطبيق أثناء تسجيل خروج المستخدم أو امسح البيانات المخزنة مؤقتًا على هاتفك المحمول.

على سبيل المثال:

مقدار ثابت clearData = غير متزامن () => {
يحاول {
انتظر AsyncStorage.clear () ،

 } يمسك (هـ) {
وحدة التحكم. Error (e) ؛
 }
};

سيحذف الكود أعلاه جميع أزواج المفتاح والقيمة المخزنة في AsyncStorage.

بالإضافة إلى ذلك ، يمكنك توفير وظيفة رد الاتصال لـ واضح()، والتي سيتم استدعاؤها بمجرد اكتمال العملية:

AsyncStorage.clear ()
 .ثم(() => {
// اكتمل مسح العملية

 })
 .يمسك((خطأ) => {
وحدة التحكم. Error (error)؛
 });

نلاحظ أن واضح() طريقة حذف جميع البيانات المخزنة في AsyncStorage نهائيًا.

تخزين البيانات مؤقتًا مع AsyncStorage

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

عند الوصول إلى جزء من البيانات ، يتم فحص البيانات أولاً لمعرفة ما إذا كانت موجودة بالفعل في ذاكرة التخزين المؤقت. إذا كان الأمر كذلك ، فسيتم إرجاع البيانات من ذاكرة التخزين المؤقت. إذا لم يكن كذلك ، فسيقوم البرنامج باسترداد البيانات من موقع التخزين الدائم وتخزينها في ذاكرة التخزين المؤقت. في المرة التالية التي تصل فيها إلى البيانات ، سيتم إرجاعها من ذاكرة التخزين المؤقت بدلاً من ذلك.

افترض أن لديك تطبيقًا يعرض قائمة بالكتب التي تم جلبها من واجهة برمجة التطبيقات. لتحسين الأداء ، يمكنك تخزين بيانات الكتاب التي تم جلبها مؤقتًا باستخدام AsyncStorage.

إليك مثال على تنفيذ هذا:

مقدار ثابت [books، setBooks] = useState ([])؛
useEffect (() => {
مقدار ثابت fetchBooks = غير متزامن () => {
يحاول {
// تحقق مما إذا كانت البيانات المخزنة مؤقتًا موجودة
مقدار ثابت cachedData = انتظر AsyncStorage.getItem ("الكتب المخبأة");
لو (البيانات المخزنة مؤقتًا! == باطل) {
// إذا كانت البيانات المخزنة مؤقتًا موجودة ، فقم بتحليلها وتعيينها كحالة أولية
 مجموعة كتب (جسون.parse (cachedData)) ؛
 } آخر {
// إذا كانت البيانات المخزنة مؤقتًا غير موجودة ، فقم بإحضار البيانات من واجهة برمجة التطبيقات
مقدار ثابت استجابة = انتظر أحضر(' https://api.example.com/books');
مقدار ثابت البيانات = انتظر response.json () ؛
// تخزين البيانات التي تم جلبها مؤقتًا
انتظر AsyncStorage.setItem ("الكتب المخبأة", جسون.stringify (البيانات)) ؛
// تعيين البيانات التي تم جلبها كحالة أولية
 setBooks (البيانات) ؛
 }
 } يمسك (خطأ) {
وحدة التحكم. Error (error)؛
 }
 };
 fetchBooks () ؛
 }, []);

في هذا المثال ، تستخدم الامتداد useEffect ربط لجلب بيانات الكتاب. في حدود جلب الكتب وظيفة ، تحقق مما إذا كانت البيانات المخزنة مؤقتًا موجودة عن طريق الاتصال AsyncStorage.getItem ("cachedBooks"). إذا كانت البيانات المخزنة مؤقتًا موجودة ، فقم بتحليلها باستخدام JSON.parse وضبطها كحالة أولية باستخدام مجموعة كتب. يتيح لك ذلك عرض البيانات المخزنة مؤقتًا على الفور.

إذا كانت البيانات المخزنة مؤقتًا غير موجودة ، جلب البيانات من API باستخدام طريقة fetch (). بمجرد إرجاع البيانات ، قم بتخزينها مؤقتًا عن طريق الاتصال AsyncStorage.setItem (). ثم قم بتعيين البيانات التي تم جلبها كحالة أولية ، مما يضمن أن عمليات العرض الإضافية ستعرض البيانات التي تم جلبها.

يمكنك الآن عرض الكتب المخزنة مؤقتًا مثل هذا:

يستورد React، {useEffect، useState} من'تتفاعل';
يستورد {عرض ، نص ، قائمة مسطحة} من"رد فعل أصلي";
يستورد التخزين غير المتزامن من"@ رد فعل أصلي غير متزامن تخزين / تخزين غير متزامن";
مقدار ثابت التطبيق = () => {
يعود (

قائمة الكتب </Text>
 البيانات = {كتب}
 keyExtractor = {(item) => item.id.toString ()}
 renderItem = {({item}) => (

{item.title} </Text>
{item.author} </Text>
 </View>
 )}
 />
 </View>
 );
};
يصدّرتقصير برنامج؛

ستعرض عمليات تشغيل التطبيقات الإضافية أو عمليات إعادة تحميل الشاشة البيانات المخزنة مؤقتًا دون إجراء طلبات واجهة برمجة تطبيقات غير ضرورية.

استخدام AsyncStorage للتحميل الديناميكي للبيانات

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

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