المُقدّمة
عند تطوير تطبيقات خفيفة الوزن - قد نرغب في تخزين بعض البيانات. إذا كانت قاعدة البيانات مبالغة - فهناك بديل رائع: 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 مرة أخرى إلى ملف كائن JSON.
عند العمل مع البيانات في React ، كثيرًا ما نستخدم السنانير لمساعدتنا في تخزينها / الاحتفاظ بها. يمكن أن تساعدنا الخطافات أيضًا في العثور على مكان تحميل تلك البيانات. هذا ينطبق أيضا على 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 لتخزين البيانات في React باستخدام localStorage. كما ذكرنا سابقًا ، لن يحل هذا أبدًا محل دور قاعدة البيانات ، ولكنه سيساعدنا في تخزين بعض البيانات المتعلقة بالمستخدم والتي يمكن أن تحسن واجهة المستخدم ولكن لا يُقصد منها الاستمرار بشكل مستقل عن المتصفح.
