מהו AsyncStorage ב-React Native וכיצד להשתמש בו?

ה-AsyncStorage של React Native הופך את האחסון והקיום של נתונים באפליקציית React Native לפשוטה. עם ה-API של AsyncStorage, אתה יכול לטפל במקרים פשוטים של נתונים קטנים בתוך האפליקציה שלך ללא צורך באחסון המקומי של המכשיר או במערכות אחסון מורכבות.

מהו AsyncStorage של React Native?

ה-API של AsyncStorage הוא מערכת אחסון מתמשכת של ערך מפתח. ה-API תומך במגוון של סוגי נתונים של JavaScript, כולל מחרוזת, בוליאנית, מספר ואובייקטי JSON.

הנתונים המאוחסנים באמצעות AsyncStorage נמשכים ויישארו זמינים גם אם האפליקציה נסגרת או שהמכשיר יופעל מחדש. זה הופך את AsyncStorage לפתרון אחסון אידיאלי לאחסון נתונים במטמון ואחסון כמויות קטנות של מצב יישומים.

איזו בעיה AsyncStorage פותר?

לפני הופעתה של AsyncStorage, אחסון נתונים נכון במטמון היה מאמץ לא אמין. אתה יכול לאחסן נתונים באחסון מקומי, שאינו מסוגל להחזיק נתונים כאשר האפליקציה שלך נסגרת, או שאתה יכול לאחסן את הנתונים במערכת לניהול מסד נתונים יחסי (RDBMS). אבל הם מורכבים מדי לתפעול עבור מקרה השימוש הזה.

AsyncStorage פותר את הבעיות הללו על ידי מתן דרך פשוטה ואמינה לאחסון נתונים קטנים וזמניים ביישומי React Native.

כדי לאחסן נתונים עם AsyncStorage, הנתונים מסודרים תחילה למחרוזת JSON. מחרוזת JSON מאוחסנת אז במערכת מפתח-ערך. כאשר אתה מנסה לאחזר נתונים מ-AsyncStorage, הנתונים עוברים מסודרת מ-JSON ולאחר מכן מוחזרים אליך בפורמט המקורי שלהם.

אלו הם תוכניות אסינכרוניות שפועלים מבלי לחסום את שרשור ה-JavaScript הראשי. מה שהופך אותו לאידיאלי לאחסון נתונים הזקוקים לגישה תכופה, כגון הגדרות משתמש ומצב יישום.

שיטות AsyncStorage

כדי להתקין את react-native-async-storage חבילה, הפעל את הפקודה הבאה בתוך הטרמינל של הפרויקט שלך:

npm להתקין את @react-native-async-storage/async-storage

מכיוון ש-AsyncStorage הוא אסינכרוני באופיו, השיטות שלו לא יחזירו תוצאות באופן מיידי. במקום זאת, הם מחזירים הבטחה שנפתרת כאשר הפעולה תושלם.

כדאי להשתמש ב- אסינכרן/ממתין תחביר או טכניקה דומה בעת קריאה לשיטות AsyncStorage.

כתוב נתונים באמצעות שיטות setItem() ו-multiSet().

ה setItem() ו multiSet() נעשה שימוש בשיטות כדי להגדיר את הערכים עבור המפתח הנתון. שיטות אלו מקבלים את המפתח ואת הערכים כפרמטרים.

השיטה תחזיר הבטחה שנפתרת עם ערך בוליאני המציין אם הפעולה הצליחה או דוחה עם שגיאה אם ​​הפעולה נכשלה:

// שמור ערך עבור המפתח "משתמש"
לְהַמתִין AsyncStorage.setItem('מִשׁתַמֵשׁ', 'ג'ון');
// שמור מספר ערכים עבור המפתח "משתמש"
לְהַמתִין AsyncStorage.multiSet(['מִשׁתַמֵשׁ', 'ג'ון', 'צְבִיָה']);

קרא נתונים באמצעות שיטות getItem() ו-multiGet().

עם ה getItem() בשיטה, תוכל למשוך נתונים שנשמרו מהאחסון באמצעות המפתח עבור הערך שברצונך לקבל. אם המפתח שעבר לא קיים, ההבטחה נדחית עם שגיאה:

const שם = לְהַמתִין AsyncStorage.getItem('מִשׁתַמֵשׁ');

הערך המוחזר על ידי getItem() הוא מחרוזת. אם אתה צריך לאחסן נתונים בפורמט אחר, אתה יכול להשתמש JSON.stringify() כדי להמיר את הנתונים למחרוזת לפני אחסונם. לאחר מכן השתמש JSON.parse() כדי להמיר את המחרוזת חזרה לסוג הנתונים המקורי בעת אחזורה.

לדוגמה:

// שמור את האובייקט {שם: "ג'ון דו", גיל: 30} עבור המפתח "משתמש"
לְהַמתִין AsyncStorage.setItem('מִשׁתַמֵשׁ', JSON.stringify({שֵׁם: "פלוני אלמוני", גיל: 30}));
// קבל את האובייקט עבור המפתח "משתמש"
const משתמש = JSON.לְנַתֵחַ(לְהַמתִין AsyncStorage.getItem('מִשׁתַמֵשׁ'));

אתה יכול גם להשתמש ב multiGet() שיטה למשוך צמדי מפתח-ערך מרובים. השיטה תיקח מערך של מפתחות שחייבים להיות מחרוזות.

מיזוג נתונים באמצעות שיטות mergeItem() ו-multiMerge()

ה mergeItem() ו multiMerge() שיטות ממזגות את הערך הנתון עם הערך הקיים עבור המפתח הנתון. הערך שהועבר ל mergeItem() יכול להיות כל סוג של נתונים. עם זאת, חשוב לציין כי AsyncStorage אינו מצפין את הנתונים, כך שכל מי שיש לו גישה למכשיר יכול לקרוא את הנתונים:

לְהַמתִין AsyncStorage.mergeItem('שֵׁם', 'ג'יין איילה');

mergeItem() לוקח את המפתח עבור הערך שברצונך למזג ואת הערך החדש שברצונך למזג עם הערך הקיים של המפתח. להשתמש multiMerge() כדי למזג יותר מפריט אחד לערך מפתח.

נקה אחסון באמצעות שיטת clear()

ה ברור() השיטה מאפשרת לך להסיר את כל הפריטים המאוחסנים ב-AsyncStorage. זה יכול להיות שימושי בתרחישים שונים, כגון כאשר אתה צריך לאפס את מצב האפליקציה במהלך התנתקות משתמש או נקה נתונים שמור בטלפון הנייד שלך.

לדוגמה:

const clearData = אסינכרון () => {
לְנַסוֹת {
לְהַמתִין AsyncStorage.clear();

 } לתפוס (ה) {
לְנַחֵםשגיאה (ה);
 }
};

הקוד לעיל ימחק את כל צמדי המפתח-ערך המאוחסנים ב-AsyncStorage.

בנוסף, אתה יכול לספק פונקציית התקשרות חזרה ברור(), אשר יופעל לאחר השלמת הפעולה:

AsyncStorage.clear()
 .לאחר מכן(() => {
// פעולת הניקוי הושלמה

 })
 .לתפוס((שְׁגִיאָה) => {
לְנַחֵם.error (שגיאה);
 });

שימו לב שה- ברור() השיטה תמחק לצמיתות את כל הנתונים המאוחסנים ב-AsyncStorage.

אחסון נתונים במטמון עם AsyncStorage

אחסון נתונים במטמון הוא נוהג נפוץ בפיתוח אפליקציות לנייד כדי לשפר ביצועים ולהפחית בקשות לרשת. עם AsyncStorage, אתה יכול לשמור נתונים בקלות באפליקציות React Native.

כאשר אתה ניגש לפיסת נתונים, הנתונים נבדקים תחילה כדי לראות אם הם כבר נמצאים במטמון. אם כן, הנתונים מוחזרים מהמטמון. אם לא, התוכנה מאחזרת את הנתונים ממיקום האחסון הקבוע יותר ומאחסנת אותם במטמון. בפעם הבאה שתיגש לנתונים, הם יוחזרו מהמטמון במקום זאת.

נניח שיש לך אפליקציה שמציגה רשימה של ספרים שנלקחו מ-API. כדי לשפר את הביצועים, אתה יכול לשמור את נתוני הספר שאוחזר באמצעות AsyncStorage.

הנה דוגמה ליישום של זה:

const [books, setBooks] = useState([]);
useEffect(() => {
const fetchBooks = אסינכרון () => {
לְנַסוֹת {
// בדוק אם הנתונים המאוחסנים במטמון קיימים
const cachedData = לְהַמתִין AsyncStorage.getItem('CachedBooks');
אם (CachedData !== ריק) {
// אם הנתונים המאוחסנים במטמון קיימים, נתח והגדר אותם כמצב ההתחלתי
 ספרי סט(JSON.parse (cachedData));
 } אַחֵר {
// אם הנתונים המאוחסנים במטמון אינם קיימים, אחזר נתונים מה-API
const תגובה = לְהַמתִין לְהָבִיא(' https://api.example.com/books');
const נתונים = לְהַמתִין response.json();
// שמור את הנתונים שאוחזרו במטמון
לְהַמתִין AsyncStorage.setItem('CachedBooks', JSON.stringify (נתונים));
// הגדר את הנתונים שהובאו כמצב ההתחלתי
 setBooks (נתונים);
 }
 } לתפוס (שגיאה) {
לְנַחֵם.error (שגיאה);
 }
 };
 fetchBooks();
 }, []);

בדוגמה זו, אתה משתמש ב- useEffect הוק כדי להביא את נתוני הספר. בתוך ה fetchBooks פונקציה, בדוק אם הנתונים המאוחסנים במטמון קיימים על ידי קריאה AsyncStorage.getItem('cachedBooks'). אם הנתונים השמורים במטמון קיימים, נתח אותם באמצעות JSON.parse והגדר אותו כמצב ההתחלתי באמצעות ספרי סט. זה מאפשר לך להציג את הנתונים המאוחסנים במטמון באופן מיידי.

אם הנתונים המאוחסנים במטמון אינם קיימים, אחזר את הנתונים מה-API באמצעות שיטת fetch()‎. לאחר החזרת הנתונים, שמור אותם במטמון על ידי קריאה AsyncStorage.setItem(). לאחר מכן הגדר את הנתונים שהובאו כמצב ההתחלתי, והבטח שעיבודים נוספים יציגו את הנתונים שאוחזרו.

כעת תוכל להציג את הספרים המאוחסנים במטמון כך:

יְבוּא תגובה, { useEffect, useState } מ'לְהָגִיב';
יְבוּא { View, Text, Flat List } מ'תגובה-יליד';
יְבוּא AsyncStorage מ'@react-native-async-storage/async-storage';
const אפליקציה = () => {
לַחֲזוֹר (

רשימת ספרים</Text>
 data={ספרים}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

השקות נוספות של אפליקציות או טעינות מחדש של מסך יציגו את הנתונים המאוחסנים במטמון מבלי לבצע בקשות API מיותרות.

שימוש ב-AsyncStorage לטעינת נתונים דינמית

React Native AsyncStorage מציעה פתרון רב עוצמה לאחסון ואחזור נתונים. מינוף יכולות אחסון במטמון, משפר את הביצועים ומספק גישה מהירה יותר לנתונים מאוחסנים.

כאשר אתה משלב ידע ב-AsyncStorage עם טכניקות כמו עימוד מותאם אישית, אתה יכול לטעון ולהציג נתונים באופן דינמי באפליקציית React Native שלך. זה יאפשר טיפול יעיל במערכי נתונים גדולים.