sessionStorage

✅ ما هو sessionStorage؟

sessionStorage هو جزء من Web Storage API، يُستخدم لتخزين البيانات في المتصفح مؤقتًا، بحيث:

  • تبقى البيانات محفوظة طالما التبويب مفتوح.
  • بمجرد إغلاق التبويب أو الصفحة، يتم حذف كل البيانات تلقائيًا.

💡 خصائص sessionStorage:
الخاصية القيمة
مدة التخزين مؤقتة (حتى غلق التبويب فقط)
التخزين حسب التبويب نعم، لا يُشارك البيانات بين التبويبات
نوع البيانات تُخزن كنصوص (string) فقط
السعة ~5 ميجابايت تقريبًا

🔧 أهم الدوال:
الوظيفةالدالة
إضافة/تعديل عنصرsessionStorage.setItem(key, value)
قراءة عنصرsessionStorage.getItem(key)
حذف عنصرsessionStorage.removeItem(key)
حذف كل العناصرsessionStorage.clear()
عدد العناصرsessionStorage.length
مفتاح حسب الفهرسsessionStorage.key(index)

✅ أمثلة عملية:

🟢 1. حفظ عنصر:

sessionStorage.setItem("user", "Yasin");
JavaScript

🟢 2. قراءة عنصر:

let user = sessionStorage.getItem("user");
console.log(user); // Yasin
JavaScript

🟢 3. حذف عنصر:

sessionStorage.removeItem("user");
JavaScript

🟢 4. مسح كل البيانات:

sessionStorage.clear();
JavaScript

🧠 تخزين كائن باستخدام JSON:

let user = { name: "Ali", age: 30 };
sessionStorage.setItem("user", JSON.stringify(user));

let userData = JSON.parse(sessionStorage.getItem("user"));
console.log(userData.name); // Ali
JavaScript

🧪 مثال تطبيقي:

<input type="text" id="cityInput" placeholder="اكتب مدينتك">
<button onclick="saveCity()">حفظ المدينة</button>
<button onclick="loadCity()">عرض المدينة</button>

<p id="output"></p>

<script>
  function saveCity() {
    let city = document.getElementById("cityInput").value;
    sessionStorage.setItem("city", city);
  }

  function loadCity() {
    let city = sessionStorage.getItem("city");
    document.getElementById("output").innerText = city ?? "لا توجد مدينة محفوظة.";
  }
</script>
JavaScript
📌 الفرق بين localStorage و sessionStorage
الميزةlocalStoragesessionStorage
مدة التخزيندائمحتى غلق التبويب فقط
المشاركة بين التبويباتنعملا
الحجم التقريبي~5-10 ميجا~5 ميجا
📋 استخدامات sessionStorage (Use Cases)
✅ 1. تخزين حالة الجلسة:
  • مثال: حفظ حالة تسجيل دخول المستخدم مؤقتًا دون الحاجة لتخزين دائم.
sessionStorage.setItem("isLoggedIn", "true");
JavaScript
✅ 2. تتبع بيانات النماذج مؤقتًا:
  • مثال: أثناء التنقل بين صفحات متعددة في نموذج تسجيل أو طلب.
✅ 3. إدارة حالة واجهة المستخدم (UI):
  • مثل حفظ الوضع الليلي/النهاري خلال الجلسة فقط.
✅ 4. سلة مؤقتة أو نتائج مؤقتة:
  • مثال: نتائج بحث، أو مقالات تم الاطلاع عليها خلال نفس الجلسة فقط.
✅ 5. منع إعادة الإرسال بعد التحديث:
  • مثل حفظ قيمة مدخلة حتى لا يعيدها المستخدم بعد تحديث الصفحة.
🛑 تحذيرات:
  • لا يُستخدم لتخزين بيانات حساسة.
  • لا يُشارك البيانات بين التبويبات.
  • يختفي عند غلق التبويب أو إعادة فتح الصفحة من جديد

🎯 فكرة المشروع:

  • الصفحة الأولى: فيها نموذج بسيط لتسجيل الاسم والبريد.
  • الصفحة الثانية: تعرض البيانات التي تم إدخالها.

📝 الصفحة 1: form.html

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>الصفحة الأولى - نموذج</title>
</head>
<body>
  <h2>👤 معلومات المستخدم</h2>
  <form onsubmit="saveData(); return false;">
    <label>الاسم:</label><br>
    <input type="text" id="name"><br><br>

    <label>البريد الإلكتروني:</label><br>
    <input type="email" id="email"><br><br>

    <button type="submit">التالي ➡️</button>
  </form>

  <script>
    // حفظ البيانات في sessionStorage
    function saveData() {
      let name = document.getElementById("name").value;
      let email = document.getElementById("email").value;

      sessionStorage.setItem("name", name);
      sessionStorage.setItem("email", email);

      // الانتقال للصفحة الثانية
      window.location.href = "result.html";
    }

    // تعبئة الحقول إن كانت البيانات موجودة مسبقًا
    window.onload = function () {
      document.getElementById("name").value = sessionStorage.getItem("name") || "";
      document.getElementById("email").value = sessionStorage.getItem("email") || "";
    };
  </script>
</body>
</html>
JavaScript

📝 الصفحة 2: result.html

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>الصفحة الثانية - عرض البيانات</title>
</head>
<body>
  <h2>📋 بياناتك:</h2>

  <p><strong>الاسم:</strong> <span id="name"></span></p>
  <p><strong>البريد:</strong> <span id="email"></span></p>

  <br>
  <a href="form.html">🔙 رجوع للتعديل</a>

  <script>
    document.getElementById("name").innerText = sessionStorage.getItem("name") || "غير متوفر";
    document.getElementById("email").innerText = sessionStorage.getItem("email") || "غير متوفر";
  </script>
</body>
</html>
JavaScript
✅ النتيجة:
  • المستخدم يكتب بياناته ويضغط “التالي”.
  • يتم حفظ البيانات في sessionStorage.
  • عند الانتقال للصفحة الثانية يتم عرض البيانات.
  • يمكنه العودة للتعديل دون فقدان ما كتبه سابقًا.
📦 مميزات هذه الطريقة:
  • لا تعتمد على السيرفر.
  • سريعة وخفيفة.
  • تحمي المستخدم من فقدان البيانات أثناء التنقل.
  • مناسبة لتطبيقات SPA أو النماذج الطويلة.