مقدمة
قد يكون إغلاق صفحة ويب عن طريق الخطأ أثناء ملء نموذج أمرًا مزعجًا. ستفقد جميع البيانات التي ملأتها وستضطر للبدء من جديد. في هذه المقالة، ستتعلم كيفية استخدام localStorage في JavaScript لتخزين بياناتك بعد انتهاء جلسة التصفح. سنوضح لك كيفية استخدام هذه الآلية وخاصية Window.localStorage، وسنستعرض أساسيات تخزين الويب في JavaScript.
ما هو LocalStorage في JavaScript؟
التخزين المحلي (localStorage) هي ميزة تتيح للمواقع وتطبيقات JavaScript تخزين أزواج المفاتيح والقيم في متصفح الويب دون تاريخ انتهاء صلاحية. هذا يعني أن البيانات المخزنة تبقى حتى بعد إغلاق المستخدم للمتصفح أو إعادة تشغيل الكمبيوتر.
التخزين المحلي (localStorage) هو خاصية لكائن النافذة، مما يجعله كائنًا عامًا قادرًا على التفاعل مع نافذة المتصفح والتحكم بها. كما يمكن استخدامه مع خصائص وأساليب نافذة أخرى.
ما هو Window.localStorage؟
تتوفر آلية التخزين المحلي (localStorage) من خلال خاصية Window.localStorage. Window.localStorage هي جزء من واجهة Window في JavaScript، وتُمثل نافذة تحتوي على مستند DOM.
تحتوي واجهة Window على مجموعة واسعة من الدوال والمنشئات والكائنات ومساحات الأسماء. Window.localStorage هي خاصية للقراءة فقط تُرجع مرجعًا إلى كائن التخزين المحلي المُستخدم لتخزين البيانات، والذي لا يمكن الوصول إليه إلا من قِبل المورد الذي أنشأه.
متى تستخدم localStorage
ببساطة، يُستخدم التخزين المحلي (localStorage) لتخزين واسترجاع البيانات. مع أنه يُمكنك تخزين كميات صغيرة من البيانات باستخدامه، إلا أنه غير مُناسب لمجموعات البيانات الكبيرة. يُمكن لأي شخص يستخدم الجهاز الوصول إلى التخزين المحلي، لذا يُنصح بعدم استخدامه لتخزين معلومات حساسة. يُمكنك استخدامه لتخزين تفضيلات المستخدم، مثل اللغة أو السمة. كما يُمكنك استخدامه لتخزين البيانات مؤقتًا عند استخدامه بكثرة. يُمكن لـ localStorage تخزين بيانات النماذج التي لن تُفقد إذا أغلق المستخدم المتصفح.
إذا كان لديك تطبيق يتطلب تسجيل الدخول، فيمكنك استخدام localStorage لحفظ بيانات الجلسة. سيظل بإمكانك تسجيل الدخول حتى بعد إغلاق المتصفح وإعادة فتحه. سنشرح ذلك لاحقًا في هذا الدرس باستخدام تطبيق بسيط للقيام بهذه المهمة.
أين يتم تخزين localStorage؟
في متصفح جوجل كروم، تُخزَّن بيانات تخزين الويب في ملف SQLite ضمن مجلد فرعي ضمن ملف تعريف المستخدم. يقع هذا المجلد الفرعي في المسار \AppData\Local\Google\Chrome\User Data\Default\Local Storage على أجهزة ويندوز، وفي المسار ~/Library/Application Support/Google/Chrome/Default/Local Storage على أجهزة ماك. يخزن فايرفوكس عناصر التخزين في ملف SQLite يُسمى webappsstore.sqlite، وهو موجود أيضًا ضمن مجلد ملف تعريف المستخدم.
مقدمة إلى واجهة برمجة تطبيقات تخزين الويب
التخزين المحلي (localStorage) هو إحدى آليتين في واجهة برمجة تطبيقات تخزين الويب، والآلية الأخرى هي تخزين الجلسة (sessionStorage). واجهة برمجة تطبيقات تخزين الويب هي مجموعة من الآليات التي تُمكّن المتصفحات من تخزين أزواج المفاتيح والقيم. صُممت لتكون أكثر سهولة في الاستخدام من استخدام ملفات تعريف الارتباط.
تُمثل أزواج المفتاح والقيمة كائنات تخزين تُشبه الكائنات، باستثناء أنها تبقى سليمة أثناء تحميل الصفحة، وتكون دائمًا سلاسل نصية. يُمكنك الوصول إلى هذه القيم كما لو كانت كائنات، أو باستخدام دالة getItem() (المزيد حول ذلك لاحقًا).
تخزين الجلسة مقابل التخزين المحلي
يحتوي كلٌّ من sessionStorage وlocalStorage على مساحة تخزين منفصلة لكل مورد متاح طوال مدة جلسة الصفحة. الفرق الرئيسي بينهما هو أن sessionStorage يحتفظ بمساحة تخزين واحدة فقط. في الوقت نفسه، يكون المتصفح مفتوحًا (حتى عند إعادة تحميل الصفحة أو تحديثها)، بينما يستمر localStorage في تخزين البيانات بعد إغلاق المتصفح.
يخزن localStorage البيانات غير المنتهية الصلاحية، بينما يخزن sessionStorage بيانات الجلسة فقط. من المهم ملاحظة أن بيانات localStorage المُحمّلة في جلسة تصفح متخفي تُمسح بعد إغلاق آخر علامة تبويب خاصة. تُعد طريقة setItem SessionStorage مفيدة عند الحاجة إلى تخزين مؤقت للبيانات، ويجب استخدامها في الحالات التي لا تتطلب ثبات البيانات بعد الجلسة الحالية.
عادةً ما تكون حدود التخزين في SessionStorage أقل مقارنةً بـ LocalStorage، وغالبًا ما تقتصر على بضعة ميغابايت لكل مورد. هذا يجعلها مناسبة لتخزين البيانات المؤقتة أثناء جلسة المستخدم دون استهلاك الكثير من موارد المتصفح.
من ناحية أخرى، يوفر LocalStorage سعة تخزين أكبر، تتراوح غالبًا بين 5 و10 ميجابايت لكل مصدر. وهو مناسب لتخزين كميات أكبر من البيانات التي تحتاج إلى الاستمرار عبر جلسات متعددة.
مزايا وعيوب LocalStorage
يُعدّ localStorage في JavaScript أداةً مهمةً لتخزين بيانات العميل. ومع ذلك، له مزايا وعيوبٌ عديدة يجب مراعاتها.
فوائد
الميزة الأولى لـ LocalStorage هي ما ذكرناه عدة مرات سابقًا، وهي أن البيانات المُخزّنة لا تنتهي صلاحيتها. يمكنك الوصول إلى البيانات دون اتصال بالإنترنت، كما أن LocalStorage يُخزّن بيانات يُمكن استخدامها دون اتصال بالإنترنت.
تخزين البيانات باستخدام localStorage أكثر أمانًا من تخزينها باستخدام ملفات تعريف الارتباط، ويمنحك تحكمًا أكبر في بياناتك. وأخيرًا، يتميز localStorage بسعة تخزين أكبر مقارنةً بملفات تعريف الارتباط. فبينما تخزن ملفات تعريف الارتباط أربعة كيلوبايت فقط من البيانات، تخزن LocalStorage ما يصل إلى خمسة ميغابايت من البيانات.
العيوب
التخزين المحلي متزامن، أي أن كل عملية تُنفَّذ واحدة تلو الأخرى. هذا يُسبب مشاكل طفيفة لمجموعات البيانات الصغيرة، ولكن مع نمو بياناتك، قد يُصبح هذا مشكلة كبيرة.
مع أن LocalStorage أكثر أمانًا من ملفات تعريف الارتباط، إلا أنه لا ينبغي استخدامه لتخزين البيانات الحساسة. يمكن لأي شخص لديه حق الوصول إلى جهاز المستخدم الوصول إلى البيانات المخزنة في LocalStorage. بالإضافة إلى ذلك، لا يمكن لـ LocalStorage سوى تخزين السلاسل النصية، لذا إذا كنت ترغب في تخزين أنواع أخرى من البيانات، فستحتاج إلى تحويلها إلى سلاسل نصية. وأخيرًا، قد يؤدي تخزين كميات كبيرة من البيانات في LocalStorage إلى إبطاء تطبيقك.
كيف يعمل LocalStorage؟
لقد سمعتَ هذا كثيرًا من قبل - يُخزّن localStorage البيانات. وإذا خزّنتَ البيانات، فقد تحتاج إلى استرجاعها لاحقًا. في هذا القسم، سنتناول بالتفصيل آلية عمل localStorage. إليك ملخص لكيفية عمله:
- setItem(): يضيف المفتاح والقيمة إلى localStorage
- getItem(): استرداد/الحصول على العناصر من localStorage
- removeItem(): يزيل عنصرًا من localStorage
- clear(): مسح جميع البيانات من localStorage
- key(): يخزن رقمًا لاسترداد المفتاح المحلي
حفظ البيانات باستخدام setItem()
تتيح لك دالة setItem() تخزين القيم في localStorage. وتأخذ معاملين: مفتاح وقيمة. ويمكن الرجوع إلى المفتاح لاحقًا لجلب القيمة المرتبطة. هكذا ينبغي أن يبدو الأمر:
localStorage.setItem('name', 'Obaseki Nosa');
في الكود أعلاه، يمكنك رؤية أن الاسم هو المفتاح، وObaseki Nosa هي القيمة. كما ذكرنا سابقًا، لا يمكن لـ localStorage تخزين سوى السلاسل النصية. لتخزين المصفوفات أو الكائنات في localStorage، يجب تحويلها إلى سلاسل نصية.
للقيام بذلك، نستخدم طريقة JSON.stringify قبل تمريرها إلى setItem()، مثل هذا:
const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));استرجاع المعلومات باستخدام getItem()
تتيح لك دالة getItem() الوصول إلى البيانات المخزنة في كائن التخزين المحلي للمتصفح. تقبل هذه الطريقة معلمة واحدة فقط، وهي المفتاح، وتُرجع القيمة كسلسلة نصية.
localStorage.getItem('name');
يُرجع هذا سلسلة نصية بالقيمة "Obaseki Nosa". إذا لم يكن المفتاح المحدد موجودًا في localStorage، فسيُرجع القيمة null. في حالة المصفوفة، نستخدم الدالة JSON.parse() التي تُحوّل سلسلة JSON إلى كائن JavaScript:
JSON.parse(localStorage.getItem('user'));
باستخدام المصفوفة التي أنشأناها أعلاه، إليك كيفية استردادها من localStorage:
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);تُرجع هذه الطريقة المصفوفة [“Obaseki”، 25]. يمكنك فحص صفحة الويب والعثور عليها في وحدة التحكم، كما يلي:
هذه الصورة من فايرفوكس، لذا ستبدو مختلفة قليلاً في المتصفحات الأخرى. لنقارنها بمصفوفة أخرى غير مُخزَّنة في localStorage:
const userArray2 = ["Oscar", 27];
console.log(userArray2);الآن، لدينا مصفوفتين في وحدة التحكم، كما هو موضح أدناه:
عادةً، إذا علّقتَ عليها في مُحرّر الشفرة، فستختفي من وحدة التحكّم. لكن أيّ شيء مُخزّن في localStorage سيبقى. إليك مثال:
إزالة البيانات باستخدام removeItem()
لإزالة عنصر من وحدة التخزين المحلية، ستستخدم دالة removeItem(). عند تمرير اسم المفتاح، تزيل دالة removeItem() المفتاح الموجود من الذاكرة. إذا لم يكن هناك عنصر مرتبط بالمفتاح المُعطى، فلن تُجري هذه الدالة أي تغيير. إليك الكود:
.localStorage.removeItem('name');
كيفية حذف كل شيء في localStorage: clear()
لحذف كل شيء في localStorage، استخدم الدالة clear(). عند استدعائها، تمسح هذه الدالة مساحة التخزين بالكامل من جميع سجلات ذلك النطاق. لا تتطلب أي معلمات. استخدم الكود التالي:
localStorage.clear();
كيفية الحصول على اسم المفتاح: key()
تُعدّ دالة key() مفيدة عند الحاجة إلى تكرار المفاتيح مع إمكانية تمرير رقم أو قائمة إلى localStorage لاسترجاع اسم المفتاح. هكذا تبدو:
localStorage.key(index);تمثل معلمة الفهرس الفهرس المبني على الصفر للمفتاح الذي تريد استرداد اسمه.
التخزين المحلي مقابل ملفات تعريف الارتباط
يُستخدم كلٌّ من LocalStorage وملفات تعريف الارتباط لتخزين بيانات العميل. وكما ذكرنا سابقًا، لا تتسع ملفات تعريف الارتباط إلا لأربعة كيلوبايت كحد أقصى من البيانات، وهو أقل بكثير من سعة التخزين التي تبلغ خمسة ميجابايت في LocalStorage.
تُرسل ملفات تعريف الارتباط تلقائيًا إلى الخادم مع كل طلب HTTP، ولكن يبقى التخزين المحلي محليًا على جهاز المستخدم. هذا يُحسّن أداء الويب ولا يزيد من حركة مرور الشبكة لأنه لا يُشارك البيانات مع الخادم.
كما رأينا، لا تنتهي صلاحية البيانات التي تخزنها في localStorage، بل تبقى هناك إلى أجل غير مسمى ما لم تحذفها يدويًا. من ناحية أخرى، يمكن ضبط ملفات تعريف الارتباط لتنتهي صلاحيتها بعد فترة زمنية أو بمجرد إغلاق المتصفح. عادةً ما تخزن ملفات تعريف الارتباط بيانات مثل تفضيلات المستخدم ومعلومات تسجيل الدخول/المصادقة. يمكن الوصول إلى هذه البيانات عبر جميع علامات تبويب ونوافذ المتصفح. ومع ذلك، لا يخزن localStorage إلا البيانات المتاحة على بروتوكول أو نطاق محدد.
دعم التخزين المحلي للمتصفح
التخزين المحلي، كنوع من تخزين الويب، هو مواصفات HTML5. تدعمه المتصفحات الرئيسية، بما في ذلك Internet Explorer الإصدار 8. يمكنك استخدام المقطع التالي للتحقق مما إذا كان المتصفح يدعم التخزين المحلي:
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}تقنيات متقدمة لإدارة البيانات في localStorage
سنستكشف الآن بعض التقنيات المتقدمة لإدارة البيانات في التخزين المحلي. سنعمل على كيفية حذف المفاتيح بفعالية، وتطبيق أفضل الممارسات لتخزين الكائنات وتنظيمها، واستخدام تحليل JSON وتحويلها إلى سلاسل نصية للبيانات المعقدة.
إزالة المفتاح الفعالة
يُعدّ إزالة المفاتيح بفعالية من الكائنات المُخزّنة في localStorage أمرًا ضروريًا لتحسين مساحة التخزين، خاصةً إذا كنت تُنشئ تطبيقًا تُحدّث فيه البيانات أو تُحذف بشكل متكرر. تُساعد إزالة المفاتيح غير الضرورية على منع تراكم البيانات غير المُجدية في LocalStorage.
لإزالة مفتاح من كائن في localStorage بفعالية، يمكنك استرداد الكائن باستخدام المفتاح، وإزالة الخاصية المطلوبة، ثم إرجاع الكائن المُحدّث إلى localStorage. هذا يُقلل من معالجة البيانات غير الضرورية وتكاليف التخزين.
// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));حفظ الكائنات وتنظيمها
يُعدّ تحليل JSON وتحويله إلى سلاسل نصية تقنيات فعّالة لإدارة هياكل البيانات المعقدة عند تخزين البيانات واسترجاعها في التخزين المحلي. فهي تتيح تحويلًا سهلًا بين كائنات JavaScript وسلاسل JSON، مما يُتيح إدارة البيانات ومعالجتها بكفاءة.
عند تخزين هياكل بيانات معقدة، مثل الكائنات أو المصفوفات، في localStorage، من الضروري تحويلها إلى سلسلة نصية باستخدام JSON.stringify() قبل ضبطها في localStorage. يُحوّل هذا كائن JavaScript إلى سلسلة نصية JSON، والتي يُمكن تخزينها كزوج مفتاح-قيمة:
// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));عند التعامل مع الكائنات أو المصفوفات المتداخلة، تأكد من أن جميع الكائنات المتداخلة يتم تحويلها إلى سلاسل وتحليلها أيضًا للحفاظ على سلامة بنية البيانات:
// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));نتيجة
في هذه المقالة، استكشفنا إمكانيات LocalStorage في JavaScript كطريقة بسيطة وفعالة لتخزين واسترجاع البيانات دون الاعتماد على ملفات تعريف الارتباط. شرحنا كيفية استخدام localStorage ومتى نستخدمه، بالإضافة إلى كيفية تخزين العناصر واسترجاعها وحذفها. استعرضنا LocalStorage عمليًا من خلال مثال عملي وقارناه بملفات تعريف الارتباط.
في هذه المقالة، تعلمتَ كيفية استخدام localStorage ومتى تستخدمه. شرحنا كيفية تخزين العناصر واسترجاعها وحذفها فيه. كما أنشأنا تطبيقًا عمليًا لتجربة كيفية عمل localStorage. وأخيرًا، قارناه بملفات تعريف الارتباط.
إذًا، لقد وصلت إلى المكان الصحيح مع أداة رائعة سهلة الاستخدام مع دعم واسع النطاق للمتصفح.
