أدوات JavaScript: localStorage و sessionStorage

Pranay Kapgate2022-06-01 · 9 min read

أدوات JavaScript: localStorage و sessionStorage

JavaScript (غالباً ما تُختصر بـ JS) هي أحد أسس البنية التحتية للويب الحديث. إنها لغة برمجة خفيفة الوزن، مفسرة، وموجهة كائنياً تدعم الدوال من الدرجة الأولى. تُعرف JavaScript في الغالب باستخدامها في صفحات الويب الديناميكية. ومع ذلك، وبسبب ميزاتها، تُستخدم JavaScript أيضاً في بيئات خارج المتصفح.

في هذا الدليل، سنناقش بالتفصيل اثنين من كائنات JavaScript: localStorage و sessionStorage.

نظرة عامة على localStorage و sessionStorage

الكائنات localStorage و sessionStorage تُقدم كجزء من واجهة برمجة تطبيقات تخزين الويب (web storage API). إنها أداة رائعة للتخزين المحلي لأزواج المفتاح والقيمة. استخدام localStorage و sessionStorage هو بديل رائع لملفات تعريف الارتباط (cookies). يقدم هذا النهج بعض الفوائد الإضافية:

يتم تخزين البيانات محلياً ولا يمكن للخادم قراءتها. هذا يقضي على المشكلات الأمنية المتعلقة بملفات تعريف الارتباط.
يتيح سعة تخزين أعلى (تصل إلى 10 ميجابايت لمعظم المتصفحات الحديثة).
صيغة برمجية بسيطة ومباشرة.

هذه الكائنات مدعومة في جميع متصفحات الويب الحديثة، لذا لن تكون هناك مشكلة في توافق المتصفحات. لا تزال ملفات تعريف الارتباط مفيدة في العديد من الحالات، على سبيل المثال، المصادقة. ومع ذلك، هناك حالات تقدم فيها localStorage و sessionStorage حلولاً أفضل.

المتطلبات الأساسية

لإجراء الخطوات الموضحة في هذا البرنامج التعليمي، ستحتاج إلى المكونات التالية:

خادم Linux مهيأ بشكل صحيح. يوضح هذا الدليل إعداد خادم Ubuntu الخاص بك على CloudSigma.
Node.js كبيئة تشغيل لـ JavaScript. تعرف على المزيد حول تثبيت Node.js على Ubuntu هنا.
متصفح ويب حديث، على سبيل المثال، Google Chrome أو Firefox.

للتوضيح، قمنا بجلب صفحة ويب نموذجية مرفقة ببرنامج نصي JS. يمكنك معرفة المزيد حول إضافة JavaScript إلى ملف HTML هنا:

tree_struct

VS 1

أما بالنسبة لمحرر النصوص، فسنستخدم Visual Studio Code:

Web 1

ما الفرق بين localStorage و sessionStorage؟

كلا من localStorage و sessionStorage ينبعان من نفس واجهة برمجة التطبيقات (API). كما أن سلوكهما متطابق أيضاً. الفرق الوحيد يكمن في الطريقة التي يسمح بها كل كائن باستمرار البيانات. في حالة sessionStorage، تستمر البيانات حتى يتم إغلاق النافذة أو علامة التبويب. ومع localStorage، تستمر البيانات حتى يتم مسح ذاكرة التخزين المؤقت للمتصفح أو يقوم تطبيق الويب بمسحها.

في هذا البرنامج التعليمي، سنركز في الغالب على localStorage. ومع ذلك، فإن الصيغة البرمجية لـ sessionStorage هي نفسها. سنعرض كيفية إنشاء وقراءة وتحديث أزواج المفتاح/القيمة باستخدام localStorage.

الخطوة 1 – إنشاء المدخلات

يمكننا الإعلان عن مدخل في كائن localStorage باستخدام setItem(). تأخذ هذه الطريقة وسيطتين: المفتاح والقيمة المقابلة له. هيكل الطريقة هو كما يلي:

localStorage.setItem(<key>, <value>)

1	localStorage.setItem(<key>, <value>)

في المثال التالي، قمنا بإنشاء متغير key. باستخدام طريقة setItem() ، قمنا بتعيين key جديد وتعيين قيمته إلى ‘value’:

let key = 'item_1';
localStorage.setItem(key, 'value');

1 2	let key = 'item_1'; localStorage.setItem(key, 'value');

VS 2

الخطوة 2 – قراءة المدخلات

الآن، كيف نقرأ القيمة المخزنة في المفتاح؟ للحصول على مفتاح من localStorage، سنستخدم الطريقة getItem(). وهي تأخذ اسم المفتاح وتعيد القيم المخزنة فيه. سنستخدم طريقة alert() لعرض المحتوى الذي جلبناه:

let myItem = localStorage.getItem(key);
alert(myItem);

1 2	let myItem = localStorage.getItem(key); alert(myItem);

VS 3

بعد ذلك، افتح صفحة الويب في متصفح ويب. يجب أن تظهر القيمة المخزنة في key:

Web 2

الخطوة 3 – تحديث المدخلات

بمجرد تعيين القيمة، ستظل كذلك ما لم يتم تغييرها. إذا استخدمنا طريقة setItem() على نفس الـ key مرة أخرى، ستقوم تلقائياً باستبدال القيمة القديمة بالقيمة الجديدة.

في المثال التالي، يتم أولاً بدء الـ key بالقيمة ‘value’. في السطر التالي، قمنا باستدعاء setItem() مرة أخرى وقمنا بتعيين القيمة إلى ‘new value’:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.setItem(key, 'new value');
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.setItem(key, 'new value');

let myItem = localStorage.getItem(key);

alert(myItem);

VS 4

دعونا نرى ما يحدث عند تشغيل هذا الكود في المتصفح:

Web 3

كما نرى، تم تعيين قيمة المفتاح إلى ‘new value’.

الخطوة 4 – حذف الإدخالات

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

لحذف إدخال من localStorage، هناك طريقة مخصصة removeItem(). وهي تأخذ key كوسيط وتزيله من localStorage مجمع البيانات:

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

دعونا ننفذ ذلك في السكريبت الخاص بنا:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.removeItem(key);
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.removeItem(key);

let myItem = localStorage.getItem(key);

alert(myItem);

VS 5

عند التشغيل، يظهر المخرج null لأنه لا توجد قيمة لـ key:

Web 4

الخطوة 5 – مسح الإدخالات

في المثال السابق، قمنا بإزالة مفتاح واحد فقط. ومع ذلك، فإن localStorage يسمح بمسح جميع العناصر المخزنة في خطوة واحدة. لمسح جميع الإدخالات، localStorage يوفر الطريقة clear(). ولا تأخذ أي وسيط:

localStorage.clear();

1	localStorage.clear();

لنضع الطريقة قيد التشغيل:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.clear();
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.clear();

let myItem = localStorage.getItem(key);

alert(myItem);

VS 6

تمامًا كما كان من قبل، فإنه يزيل جميع الإدخالات من localStorage، لذلك عند محاولة الوصول إلى قيمة key ، فإنه يعيد null:

Web 5

الخطوة 6 – العمل مع JSON

تخزين الكائنات والمصفوفات

إن كائنات localStorage و sessionStorage يمكنها فقط تخزين قيم نصية. ومع ذلك، ستكون هناك أوقات يتعين عليك فيها العمل مع الكائنات أو المصفوفات. في هذه الحالة، نحتاج إلى تحويلها إلى سلسلة نصية.

تأتي لغة JavaScript مع ميزة JSON.stringify() التي تأخذ المصفوفة/الكائن وتحولها إلى سلاسل نصية. يقدم هذا المنشور نظرة عامة سريعة على تنسيق JSON. للحصول على دليل أكثر تفصيلاً، يمكنك قراءة JSON في JavaScript.

في هذا المثال، قمنا بإنشاء كائن sampleObj يحتوي على حقلين name و location. وسنقوم بتحويله إلى سلسلة نصية وتخزينه في key:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = localStorage.getItem(key);

alert(myItem);

VS 7

هنا، سيكون المخرج هو السلسلة النصية التي تحتوي على بيانات الكائن:

Web 6

قراءة الكائنات والمصفوفات

عند التخزين، قمنا بتحويل الكائنات والمصفوفات إلى سلاسل نصية. يمكننا أخذ هذه السلسلة وإعادتها إلى تنسيقها الأصلي أيضًا. للقيام بذلك، سنستخدم الطريقة JSON.parse(). وهي تأخذ سلسلة نصية وتحولها مرة أخرى إلى تنسيق JSON:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = JSON.parse(localStorage.getItem(key));
alert(JSON.stringify(myItem, null, " "));

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = JSON.parse(localStorage.getItem(key));

alert(JSON.stringify(myItem, null, " "));

VS 8

بالنسبة للمخرج، قمنا بإعادة تحويله إلى سلسلة نصية وتنسيقه لعرض أفضل:

Web 7

الخطوة 7 – التحقق من وجود عنصر في localStorage

في هذا القسم، سنعرض اختبارًا بسيطًا لتحديد ما إذا كان localStorage و sessionStorage يحتوي على أي عنصر أم لا. باستخدام if بسيطة، يمكننا التحقق من طول localStorage أو sessionStorage. إذا كانت هناك عناصر، فسيكون الطول أكبر من 0.

أولاً، قم بتنفيذ المثال التالي:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
alert('true');
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

alert('true');

}

else{

alert('false');

}

VS 9

هنا، ستكون النتيجة ‘true’ لأنه يوجد مفتاح واحد في localStorage:

Web 8

الخطوة 8 – التكرار عبر العناصر

يقوم كائن localStorage و sessionStorage بتخزين المفاتيح في بنية تشبه المصفوفة. وهي لا تدعم طريقة forEach، لذا سيتعين علينا اتباع الطريقة الكلاسيكية باستخدام حلقة for للتكرار عبر كل عنصر.

في المثال التالي، سنتحقق مما إذا كان localStorage فارغاً أم لا. إذا لم يكن فارغاً، فسنقوم بالتكرار عبر كل عنصر:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
for(i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let myItem = localStorage.getItem(key);
alert(key);
}
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

for(i = 0; i < localStorage.length; i++){

let key = localStorage.key(i);

let myItem = localStorage.getItem(key);

alert(key);

}

else{

alert('false');

}

VS 10

ستعرض النتيجة جميع العناصر واحداً تلو الآخر:

Web 9

الخطوة 9 – التحقق من دعم المتصفح

يمكننا التحقق من دعم localStorage (و sessionStorage) من خلال التحقق مما إذا كان متاحاً في كائن window. ستفي عبارة if البسيطة بالغرض:

if(window.localStorage){
alert(true);
}
else{
alert(false);
}

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

قم بتشغيل الكود في متصفح الويب:

Web 10

أفكار نهائية

أوضح هذا الدليل كيفية استخدام كائنات localStorage و sessionStorage في JavaScript لتخزين أزواج المفاتيح/القيم في المتصفح. إن صيغ الكتابة أسهل بكثير في التعامل معها. لقد استعرضنا كيفية إنشاء أزواج المفاتيح/القيم وإزالتها وتحديثها. وتطرقنا أيضاً إلى تخزين الكائنات والمصفوفات عن طريق تحويلها إلى سلاسل نصية (والعكس بالعكس).

لمزيد من تعميق معرفتك بلغة JavaScript، يمكنك الاطلاع على البرامج التعليمية التالية من مدونتنا:

حوسبة سعيدة!

Pranay Kapgate

المؤلف · CloudSigma

Preslav Dobrev هو مصمم إبداعي في CloudSigma، يركز على هوية أعمال متسقة باستخدام قنوات التسويق التقليدية والمبتكرة. هو بارع في دمج الرؤية الفنية مع التسويق الاستراتيجي لخلق سرد قصصي مؤثر للعلامة التجارية.

أدوات JavaScript: localStorage و sessionStorage

نظرة عامة على localStorage و sessionStorage

المتطلبات الأساسية

ما الفرق بين localStorage و sessionStorage؟

الخطوة 1 – إنشاء المدخلات

الخطوة 2 – قراءة المدخلات

الخطوة 3 – تحديث المدخلات

الخطوة 4 – حذف الإدخالات

الخطوة 5 – مسح الإدخالات

الخطوة 6 – العمل مع JSON

تخزين الكائنات والمصفوفات

قراءة الكائنات والمصفوفات

الخطوة 7 – التحقق من وجود عنصر في localStorage

الخطوة 8 – التكرار عبر العناصر

الخطوة 9 – التحقق من دعم المتصفح

أفكار نهائية

Pranay Kapgate

التعليقات