💾 كيفية استخدام LocalStorage في JavaScript لحفظ البيانات داخل المتصفح

هل سبق وأن زرت موقعًا إلكترونيًا ووجدت أن معلوماتك ما زالت محفوظة بعد إغلاق المتصفح؟ الفضل في ذلك يعود إلى تقنية تسمى LocalStorage، وهي جزء من واجهة Web Storage في JavaScript. في هذا المقال، سنشرح ما هو LocalStorage، كيف يعمل، ومتى يجب استخدامه، مع أمثلة تطبيقية عملية تسهّل عليك الفهم والتطبيق.

1. ما هو LocalStorage؟

LocalStorage هو مكان داخل المتصفح يُستخدم لتخزين البيانات على جهاز المستخدم بشكل محلي. تتميز هذه التقنية بأنها:

لا تُحذف عند إغلاق المتصفح.
تخزن حتى 5 ميغابايت من البيانات.
لا تحتاج إلى قاعدة بيانات أو خادم.
تخزن البيانات على شكل نصوص (Strings) فقط.

2. متى تستخدم LocalStorage؟

يمكنك استخدام LocalStorage في عدة حالات، منها:

حفظ إعدادات المستخدم (الوضع المظلم، اللغة...).
تخزين عناصر قائمة المهام (To-do list).
تخزين بيانات النموذج حتى لا تضيع عند إعادة تحميل الصفحة.
حفظ المنتجات المضافة إلى عربة التسوق في المواقع التجارية.

3. كيفية استخدام LocalStorage

LocalStorage يحتوي على 5 دوال أساسية:

localStorage.setItem(key, value) لحفظ عنصر.
localStorage.getItem(key) لاسترجاع عنصر.
localStorage.removeItem(key) لحذف عنصر.
localStorage.clear() لمسح جميع العناصر.
localStorage.length للحصول على عدد العناصر.

4. مثال عملي 1: حفظ اسم المستخدم


// حفظ الاسم
localStorage.setItem("username", "khalil");

// استرجاع الاسم
let name = localStorage.getItem("username");
console.log("مرحباً، " + name);

// حذف الاسم
localStorage.removeItem("username");

// مسح كل شيء
localStorage.clear();

ملاحظة: كل القيم تُخزن كنصوص، حتى لو كانت أرقامًا أو كائنات.

5. مثال عملي 2: بناء قائمة مهام (To-Do List)

مثال كامل لإنشاء صفحة بها خانة لإضافة مهام، والمهام تبقى محفوظة حتى بعد إغلاق الصفحة:

<!DOCTYPE html>
<html>
<head>
  <title>قائمة المهام</title>
  <style>
    body { font-family: Arial; padding: 20px; background: #f9f9f9; }
    input, button { padding: 10px; margin: 5px; }
    ul { list-style: none; padding: 0; }
    li { background: #eee; margin-bottom: 5px; padding: 10px; }
  </style>
</head>
<body>

  <h2>📋 قائمة المهام</h2>
  <input type="text" id="taskInput" placeholder="أدخل مهمة جديدة..." />
  <button onclick="addTask()">أضف المهمة</button>
  <ul id="taskList"></ul>

  <script>
    // تحميل المهام من التخزين
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

    function displayTasks() {
      document.getElementById("taskList").innerHTML = "";
      tasks.forEach((task, index) => {
        document.getElementById("taskList").innerHTML +=
          "<li>" + task + 
          " <button onclick='deleteTask(" + index + ")'>🗑️ حذف</button></li>";
      });
    }

    function addTask() {
      let task = document.getElementById("taskInput").value;
      if (task) {
        tasks.push(task);
        localStorage.setItem("tasks", JSON.stringify(tasks));
        displayTasks();
        document.getElementById("taskInput").value = "";
      }
    }

    function deleteTask(index) {
      tasks.splice(index, 1);
      localStorage.setItem("tasks", JSON.stringify(tasks));
      displayTasks();
    }

    displayTasks();
  </script>

</body>
</html>

✅ الخاتمة

LocalStorage هي أداة قوية ومجانية تتيح لك تخزين البيانات مباشرة على جهاز المستخدم. سواء كنت تبني تطبيقًا بسيطًا أو تعمل على مشروع كبير، فهمك لطريقة عمل LocalStorage سيمكنك من تقديم تجربة مستخدم أفضل وأكثر احترافية.

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