التعامل مع ذاكرة التخزين المحلية local storage في جافاسكربت JavaScript الدرس |22| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الاثنين، 20 أبريل 2020

التعامل مع ذاكرة التخزين المحلية local storage في جافاسكربت JavaScript الدرس |22|


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

اليوم سوف نتحدث عن local storage اي ذاكرة التخزين المحلية,فهي تمتلك 3 عناصر رئيسية في الجافاسكربت وهي :
1-localStorage.setItem ("key",value);
2-localStorage.getItem ("key");
3-localStorage.removeItem ("key");

شرح ما سبق

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

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


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


لحذف البيانات التي تم تخزينها نستخدم الامر التالي
var age = 1990;
localStorage.setItem("Age", age);
alert(localStorage.getItem("Age"));
localStorage.removeItem("Age");


مثال

لننشأ عنصر h1 في ملف الـ html أولاً و نضع له ايدي id
<body>
       <h1 id="getName"><h1>
</body>

و ننشئ عنصر prompt في ملف الجافاسكربت 
var setName = prompt("اكتب اسمك");
document.getElementById("getName").innerHTML = "اهلا بك :" + setName;


والنتيجة اول فتحه في المتصفح

سأكتب في هذا الفراغ اسمي داتا لنرى ماذا سيحدث
 
 كما لاحظنا بأن القيمة الذي وضعناها في ديالوك النافذه المنبثقة اصبحت قيمة  للمتغير setName لكن في كل مرة سوف نحدث الصفحه سوف يطلب مننا قيمة لأننا لم نحفظها بعد في الذاكرة المحلية.
لتخزين القيمة في الذاكرة المحلية نستخدم كالتالي
if (localStorage.getItem("Name")==null){
        var setName = prompt("اكتب اسمك");
        localStorage.setItem("Name",setName);
}
document.getElementById("getName").innerHTML = "اهلا بك :" + localStorage.getItem("Name");


بهذه الطريقة سوف تبقى القيمة محفوظة في الذاكرة المحلية حتى و إن تم تحديث صفحة المتصفح.
اذا اردنا حذف البيانات التي تم تخزينها نضع فنكشن  function و زر للحذف كما يلي 
ننشئ زر في ملف html و نضع له خاصية الضغط onclick
<body>
       <h1 id="getName"></h1>
       <button onclick="removeItem()">حذف البيانات</button>
</body>

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


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

تذكير مهم
لربط الجافاسكربت مع ملف html نضع الربط ضمن وسم body و يكون اسفل جميع العناصر, أي فوق وسم اغلاق /body مباشرتاً.
<script src="اسم الملف"></script>

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام