تطبيق وصل wassll لمتابعة مخصصات المحروقات

التعامل مع ذاكرة التخزين المحلية في جافاسكربت

الذاكرة المحلية ( localStorage ) أي ذاكرة التخزين المحلية في المتصفحات. تخزَّن كائنات localStorage البيانات و لا يتم حذف هذه البيانات عند إغلاق المتصفح و تتوفر هذه البيانات من أجل الجلسات المستقبلية. إن localStorage تمتلك 3 عناصر رئيسية و هي :

1. localStorage.setItem ("key",value);
2. localStorage.getItem ("key");
3. localStorage.removeItem ("key");

حيث أن:

• العنصر setItem: نقوم بوضع إسم للمفتاح key و بعده نقوم بوضع قيمة value له و المفتاح يكون متغير يعني var.
• setItem javascriptالعنصر getItem: يمكّننا من الحصول على القيمة بعدما خزنّاها في الطريقة الأولى و نقوم بتحديد إسم المتغير الذي تم حفظه في الذاكرة المحلية.
• العنصر removeItem: مهمته حذف البيانات من الذاكرة المحلية و يلزم للحذف فقط إسم المفتاح.

مثال 1

var age = 1990;
localStorage.setItem("Age", age);
alert(localStorage.getItem("Age"));

خزنّنا قيمة 1990 في المتغير الذي إسمه age و إستدعينا ذاكرة التخزين لتحفظ لنا المفتاح Age و قيمته تكون قيمة المتغير age. ثم طلبنا عرضها عبر alert و الأمر getItem أي يعني الحصول على القيمة المخزنة في الذاكرة التي تحمل المفتاح Age.

 

حذف البيانات التي تم تخزينها removeItem

نقوم بإستخدام أمر removeItem لأجل حذف البيانات من localStorage و يلزمنا من أجل حذف هذه البيانات فقط key.

مثال 2

var age = 1990;
localStorage.setItem("Age", age);
alert(localStorage.getItem("Age"));
localStorage.removeItem("Age");

قمنا بإنشاء متغير عددي إسمه age و قيمته هي 1990, و وضعنا إسم و قيمة لهذا المتغير عن طريق setItem. ثم قمنا بإستعراض ما تم حفظه في الذاكرة المحلية في المتصفح عن طريق alert و كانت هي قيمة المتغير. ومن ثم عند إغلاق المتصفح قمنا بحذف ما تم حفظه في الجلسة السابقة عن طريق removeItem.

مثال 3

<h1 id="getName"><h1>
var setName = prompt("اكتب اسمك");
document.getElementById("getName").innerHTML = "اهلا بك :" + setName;

قمنا بإنشاء الوسم h1 في جسم الصفحة html ووضعنا له id و الأيدي هو getName. و أنشأنا متغير إسمه setName و به العنصر prompt من أجل إنشاء نافذة منبثقة ديالوك حقل نصي نستطيع الكتابة به. و قمنا بإستعراض البيانات عن طريق getElementById و كتبنا الأيدي لنستطيع الوصول إليه بسهولة و كتبنا "اهلا بك" من أجل عرضها قبل القيمة المدخلة في الحقل.

عندما أكتب في هذا الفراغ إسم محمد العلوش و نرى ما سوف يحدث.

كما لآحظنا بأن القيمة التي وضعناها في ديالوك النافذه المنبثقة أصبحت قيمة للمتغير setName. لكن في كل مرة سوف نحدث الصفحه سوف يطلب مننا قيمة لأننا لم نحفظها بعد في الذاكرة المحلية.

 

تخزين القيمة في الذاكرة المحلية

if (localStorage.getItem("Name")==null){
	var setName = prompt("اكتب اسمك");
	localStorage.setItem("Name",setName);
}
document.getElementById("getName").innerHTML = "اهلا بك :" + localStorage.getItem("Name");

بهذه الطريقة سوف تبقى القيمة محفوظة في الذاكرة المحلية حتى و إن تم تحديث صفحة المتصفح. و إذا أردنا حذف البيانات التي تم تخزينها نضع دالة function و زر للحذف.

<h1 id="getName"></h1> 
<button onclick="removeItem()">حذف البيانات</button>

في الجافا سكربت يكون

if (localStorage.getItem("Name")==null){
	var setName = prompt("اكتب اسمك");
	localStorage.setItem("Name",setName);
}
function removeItem(){
	localStorage.removeItem("Name") ;
}
document.getElementById("getName").innerHTML = "اهلا بك :" + localStorage.getItem("Name");

بهذه الطريقة سوف تبقى البيانات مخزّنة في الذاكرة و عند الضغط على زر الحذف سوف يحذف البيانات المخزنة و يُعيد طلب بيانات جديدة عند التحديث.