الدرس الثاني عشر: التعامل مع قاعدة بيانات Access باستخدام VBA

الدرس الرابع عشر: التخزين المحلي في JavaScript – حفظ البيانات على المتصفح

 

الدرس الرابع عشر: التخزين المحلي في JavaScript – حفظ البيانات على المتصفح 🗂️

---

العنوان:

كيفية استخدام التخزين المحلي (Local Storage) لتخزين واسترجاع البيانات في المتصفح.

---

المقدمة:

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

---

ما هو Local Storage؟

• Local Storage هو مساحة تخزين دائمة تُخصص داخل المتصفح.
• يمكن للتطبيقات استخدامه لتخزين بيانات بحجم يصل إلى 5 ميجابايت (في الغالب).
• البيانات المخزنة لا تُحذف إلا يدويًا أو باستخدام الكود.

الفرق بين Local Storage وSession Storage:

الميزة	Local Storage	Session Storage
مدة التخزين	دائم حتى يُحذف.	يختفي عند إغلاق التبويب.
حجم البيانات	5 ميجابايت تقريبًا.	نفس الحجم تقريبًا.

---

استخدام Local Storage:

1. حفظ البيانات باستخدام setItem:

localStorage.setItem("username", "Mostafa");

2. استرجاع البيانات باستخدام getItem:

let username = localStorage.getItem("username");
console.log(username); // "Mostafa"

3. حذف بيانات محددة باستخدام removeItem:

localStorage.removeItem("username");

4. حذف جميع البيانات باستخدام clear:

localStorage.clear();

---

تطبيق عملي: تخزين وإظهار اسم المستخدم

الكود:

<input type="text" id="usernameInput" placeholder="Enter your name">
<button id="saveButton">Save</button>
<p id="displayUsername"></p>
<script>
  let input = document.getElementById("usernameInput");
  let button = document.getElementById("saveButton");
  let display = document.getElementById("displayUsername");
  button.addEventListener("click", function () {
    let username = input.value;
    localStorage.setItem("username", username);
    display.innerText = `Welcome, ${username}!`;
  });
  // Load saved username on page reload
  let savedUsername = localStorage.getItem("username");
  if (savedUsername) {
    display.innerText = `Welcome back, ${savedUsername}!`;
  }
</script>

---

التعامل مع البيانات المركبة (Objects):

تخزين كائنات JSON:

let user = {
  name: "Mostafa",
  age: 30
};
// تخزين
localStorage.setItem("user", JSON.stringify(user));
// استرجاع
let retrievedUser = JSON.parse(localStorage.getItem("user"));
console.log(retrievedUser.name); // "Mostafa"

---

تمارين عملية:

1. صمم تطبيق قائمة مهام (To-Do List) يخزن العناصر في Local Storage.
2. أنشئ صفحة تسأل المستخدم عن لونه المفضل وتستخدمه لتغيير لون الخلفية عند تحميل الصفحة.
3. أنشئ تطبيق لتخزين وحساب نتائج الطلاب باستخدام Local Storage.

---

وختامًا:

تعلمنا اليوم كيفية تخزين البيانات محليًا باستخدام Local Storage، وهي تقنية مهمة للتطبيقات التفاعلية. في الدرس القادم، سننتقل إلى أساسيات الجمل الشرطية (Conditions) وكيفية استخدامها في برمجة JavaScript. استعد للتقدم! 🚀

---

تعديل المقال