التعامل مع الذاكرة المحلية localStorage في جافاسكريبت - ProgrammerTech
Language:

Search

التعامل مع الذاكرة المحلية localStorage في جافاسكريبت

  • Share this:
التعامل مع الذاكرة المحلية localStorage في جافاسكريبت

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

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

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

حيث أن:

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

 

مثال 1
var age = 1990;
localStorage.setItem("Age", age);
alert(localStorage.getItem("Age"));

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

1-47.webp

 

حذف البيانات التي تم تخزينها 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 و كتبنا الأيدي لنستطيع الوصول إليه بسهولة و كتبنا "اهلا بك" من أجل عرضها قبل القيمة المدخلة في الحقل.

2-42.webp

 

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

3-38.webp

 

كما لآحظنا بأن القيمة التي وضعناها في ديالوك النافذه المنبثقة أصبحت قيمة للمتغير 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");

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


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com