מבוא
בעת פיתוח יישומים קלים - ייתכן שנרצה לאחסן נתונים מסוימים. אם מסד נתונים מוגזם - יש אלטרנטיבה מצוינת: localStorage!
אמנם הוא אינו מחליף מסד נתונים למטרות מסד נתונים, אך הוא משמש כמערכת אחסון פשוטה מבוססת קבצים שתוכל למנף אותה כדי לאחסן נקודות נתונים נגישות בקלות.
במאמר זה נלמד כיצד להשתמש
localStorageכדי לאחסן נתונים בקלות בדפדפן שלנו. נתונים אלה נשמרים בשם זוגות ערך מפתח שהמשתמש יכול לאחזר בקלות.
שמירת נתונים ל localStorage ב-React זה סופר קל:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
אם אתה לא ממהר ומעוניין ללמוד עוד על איך זה עובד, המשך לקרוא!
מה אחסון מקומי?
localStorage הוא אובייקט אחסון אינטרנט המאפשר למפתחים לאחסן זוגות ערך מפתח בדפדפן אינטרנט ומבטיח שהנתונים האלה ישרדו את כל רענון העמודים, גם כאשר משתמש סוגר או מפעיל מחדש דפדפן - ואין לו תאריך תפוגה. צמדי מפתח-ערך מאוחסנים יכולים לכלול כל סוג של נתונים - מערכים, אובייקטים, מחרוזות, מספרים ועוד רבים אחרים.
עם זאת, זה לא יכול להחליף את התפקיד של מסדי נתונים באתרים ובאפליקציות האינטרנט שלך מכיוון שהנתונים אובדים כאשר משתמש מנקה את המטמון והאחסון המקומי של הדפדפן - בסופו של דבר, זה אחסון מקומי וצריך להשתמש בו ככזה. עם זאת, ישנם מצבים שבהם משתמש יכול להשתמש localStorage, כגון יישום ה מצב כהה תכונה, ערך קלט טופס קבוע של משתמש ועוד רבים אחרים.
localStorage יש שיטות מובנות המאפשרות לנו גישה לאובייקט האחסון של הדפדפן. דוגמה אחת היא ה setItem() שיטה, המאפשרת לנו להוסיף מפתח וערך localStorage, ולכן מאפשר לנו לאחסן נתונים. שיטות אחרות משמשות לאחזור נתונים - getItem(), מחק נתונים - removeItem(), נקה הכל localStorage מקרים - clear(), וכן הלאה.
אחסון נתונים ל אחסון מקומי עם setItem() שִׁיטָה
השמיים setItem() השיטה מאפשרת לנו לשמור ערכים מכל סוג נתונים ל localStorage על ידי הקצאת ערכים למפתחות, וכתוצאה מכך א זוג מפתח-ערך. מפתח זה ישמש כדי לאחזר את הערך המתאים בכל פעם שנרצה לאחזר אותו localStorage.
הערה: על מנת לאחסן נתונים ב localStorage, ראשית עלינו להמיר אותו ל מחרוזת JSON באמצעות JSON.stringify() פוּנקצִיָה. וכשנרצה לאחזר אותו, ננתח את הנתונים באמצעות JSON.parse(), המרת מחרוזת JSON בחזרה ל-a אובייקט JSON.
כאשר עובדים עם נתונים ב-React, אנו משתמשים לעתים קרובות ווים כדי לעזור לנו לאחסן/להחזיק אותו. Hooks יכול גם לעזור לנו למצוא לאן להעלות את הנתונים האלה. זה חל גם על localStorage כי אנחנו נשתמש ב useState() ו useEffect() ווים. ווים אלה הם קריטיים כי useState() הוק משמש לשמירה והגדרת נתונים, בעוד שה- useEffect() ה-hook מופעל כברירת מחדל לאחר העיבוד הראשון ובכל פעם שהמצב עבר כשהפרמטר השני משתנה.
לאחר הסבר על הבסיס, הנה הקוד שבו נשתמש לאחסון נתונים localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
יצרנו תחילה מדינה שתחזיק את הנתונים שאנו רוצים לאחסן אצלנו localStorage, ולאחר מכן יצרנו א useEffect() וו, מעביר את המדינה כפרמטר השני. כך, בכל פעם שהמדינה משתנה, הנתונים ב- localStorage מתעדכן לערך הנוכחי.
טיפלנו בפונקציונליות הליבה, המשמשת כדי לסייע לנו באחסון נתונים, בתוך useEffect() וו:
localStorage.setItem('dataKey', JSON.stringify(data));
סיכום
במאמר זה למדנו כיצד להשתמש ב-React hooks כדי לאחסן נתונים ב-React באמצעות localStorage. כפי שצוין קודם לכן, זה לעולם לא יחליף את התפקיד של מסד נתונים, אלא יסייע לנו לאחסן כמה נתונים הקשורים למשתמש שיכולים לשפר את ממשק המשתמש, אך לא אמור להיות מתמיד ללא תלות בדפדפן.
