JavaScript - Web History API

JavaScript Web History API – التعامل مع سجل المتصفح

🔸 History API تسمح لك بالتفاعل مع سجل التنقل الخاص بالمستخدم دون إعادة تحميل الصفحة. تُستخدم بشكل كبير في تطبيقات الـ SPA (تطبيقات الصفحة الواحدة) لتغيير العناوين والتحكم في الرجوع والتقدم.

---

🔹 الرجوع والتقدم في السجل

history.back();    // يعيد المستخدم إلى الصفحة السابقة
history.forward(); // ينقله إلى الصفحة التالية (إذا كانت موجودة)

📌 تعمل مثل أزرار المتصفح "رجوع" و"التالي".

---

🔹 التنقل داخل السجل

history.go(-1); // يعادل back()
history.go(1);  // يعادل forward()
history.go(0);  // إعادة تحميل الصفحة

---

🔹 التلاعب بعنوان URL بدون إعادة تحميل

history.pushState({ page: 1 }, "title 1", "?page=1");

📌 pushState() تُضيف عنوان جديد إلى السجل، وتُغير شريط العنوان بدون تحديث الصفحة.

---

🔹 التقاط التنقل عبر popstate

window.onpopstate = function(event) {
  console.log("حدث رجوع أو تقدم", event.state);
};

📌 تُستخدم هذه الدالة لمعرفة متى عاد المستخدم إلى صفحة سابقة عبر History API.

---

📌 استخدامات شائعة

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

---

⚠️ ملاحظات مهمة

• pushState لا تؤدي إلى حدث popstate، بينما back() وgo() يفعلون ذلك.
• لا يمكن تغيير الأصل (origin) باستخدام pushState — فقط المسار والاستعلام.