قراءة localStorage والكتابة فيه في React

يُعد localStorage مخزنًا مضمّنًا في المتصفح، ويحتوي على أربع طرق أساسية: setItem(key, value) وgetItem(key) وremoveItem(key) وclear(). وتبقى البيانات محفوظة عبر إعادة تحميل الصفحة وإعادة تشغيل المتصفح.

يوجد localStorage على الكائن window، ويكون نطاقه حسب الأصل، أي إن لكل نطاق تخزينًا معزولًا خاصًا به.

يُنفّذ كل استدعاء إلى localStorage بشكل متزامن في الخيط الرئيسي. وقد تؤدي قراءة كميات كبيرة من البيانات أو كتابتها إلى حجب الرسم وجعل واجهة المستخدم متقطعة.

لذلك، احرصوا على إبقاء القيم المخزنة صغيرة، وتجنبوا الكتابة عند كل ضغطة مفتاح أو حدث تمرير.

لا يستطيع localStorage تخزين سوى السلاسل النصية. ولتخزين كائن أو مصفوفة، يجب إجراء تسلسل لها أولًا باستخدام JSON.stringify(value) قبل استدعاء setItem.

إذا خزّنتم قيمة غير نصية مباشرة، فسيجري تحويلها تلقائيًا، ولذلك يتحول الكائن إلى السلسلة غير المفيدة [object Object].

عند القراءة، تستدعون JSON.parse(localStorage.getItem(key))، لكن قد يثير التحليل استثناءً إذا كانت السلسلة المخزنة تالفة أو قد كتبها مصدر آخر.

ضعوا عملية التحليل داخل try/catch، واستخدموا قيمة افتراضية بديلة حتى لا تؤدي قيمة تالفة إلى تعطيل المكوّن.

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

يتمثل الاختبار الآمن في استخدام try/catch لتعيين مفتاح وهمي وإزالته، مع إرجاع false إذا أُثير استثناء.

تضع معظم المتصفحات حدًا يقارب خمسة ميغابايت لـ localStorage لكل origin. ويؤدي تجاوز هذا الحد إلى طرح QuotaExceededError عند الكتابة.

لذلك يناسب localStorage البيانات الصغيرة، لكنه خيار غير مناسب للصور أو مجموعات البيانات الكبيرة أو استجابات API المخزنة مؤقتًا.

تشمل الخيارات المناسبة الأجزاء الصغيرة وغير الحساسة من حالة واجهة المستخدم والمستخدم، مثل تفضيل السمة، وحالة طي الشريط الجانبي، وآخر عوامل التصفية المستخدمة، واللافتات التي أخفيتموها، ومسودات النماذج غير المحفوظة.

وهي قيم تريدون أن تبقى بعد إعادة التحميل، لكنها لا تحتاج إلى طلب ذهابًا وإيابًا إلى الخادم.

تجنبوا تخزين الأسرار مثل الرموز المميزة أو كلمات المرور، لأن أي script في الصفحة يمكنه قراءة localStorage، مما يجعله عرضة لهجمات XSS. وتجنبوا أيضًا الكائنات الكبيرة وحالة الخادم المعتمدة.

ينبغي وضع بيانات المصادقة الحساسة في cookies تحمل السمة httpOnly، بينما ينبغي وضع البيانات الأساسية على الخادم.

يشترك كلاهما في واجهة API نفسها، لكن يتم مسح sessionStorage عند إغلاق علامة التبويب، ولا تتم مشاركته بين علامات التبويب. أما localStorage فيستمر إلى أجل غير محدد، وتتم مشاركته بين جميع علامات التبويب ذات origin نفسه.

اختاروا sessionStorage للبيانات قصيرة الأجل الخاصة بعلامة تبويب معينة، وlocalStorage للتفضيلات الدائمة.

ملفات تعريف الارتباط صغيرة وتُرسل مع كل طلب HTTP، مما يجعلها مناسبة للمصادقة، لكنه يهدر النطاق الترددي عند استخدامها للبيانات العامة. أما IndexedDB فهي قاعدة بيانات غير متزامنة للبيانات الكبيرة والمنظمة، وتتجاوز حد 5MB بكثير.

اختاروا ملفات تعريف الارتباط للمصادقة التي يقرأها الخادم، وlocalStorage لتفضيلات العميل الصغيرة، وIndexedDB للبيانات الكبيرة أو المعقدة.

تكتب دالة المساعدة الدنيا باستخدام localStorage.setItem(key, JSON.stringify(value))، وتقرأ باستخدام try/catch محمي يحيط بـ JSON.parse(localStorage.getItem(key))، مع إرجاع قيمة افتراضية عند الفشل.

يُبقي هذا الغلاف الصغير عملية التسلسل ومعالجة الأخطاء في مكان واحد.

اختبروا مدى فهمكم لأنواع بيانات localStorage.

تعلمتم واجهة API الخاصة بـ localStorage، وأنها متزامنة ولا تتعامل إلا مع السلاسل النصية، وأن سعتها تقترب من 5MB، كما تعلمتم كيفية التحليل بأمان والتحقق من التوفر في SSR ووضع التصفح الخاص.

وقارنتم أيضًا بينه وبين sessionStorage وملفات تعريف الارتباط وIndexedDB لاختيار مخزن البيانات المناسب.