History API بخشی از Web APIs است که به شما اجازه می‌دهد تاریخچه مرورگر را با جاوااسکریپت کنترل کنید.
این API امکان رفتن به صفحات قبل/بعد، تغییر URL بدون رفرش شدن صفحه و مدیریت state مرورگر را فراهم می‌کند.

🔹 1. دسترسی به History

تاریخچه مرورگر از طریق شیء window.history در دسترس است.

console.log(window.history.length);

📌 این عدد نشان‌دهنده تعداد صفحات در history جلسه جاری است.

🔹 2. متدهای اصلی History API

🟢 ()back

رفتن به صفحه قبلی.

history.back();

🟢 ()forward

رفتن به صفحه بعدی.

history.forward();

🟢 go()

رفتن به یک صفحه خاص در تاریخچه.

history.go(-1); // یک صفحه به عقب
history.go(1);  // یک صفحه به جلو
history.go(0);  // بارگذاری مجدد صفحه فعلی

🔹 3. تغییر URL بدون رفرش

History API به شما اجازه می‌دهد بدون اینکه صفحه رفرش شود، آدرس مرورگر را تغییر دهید.

🟢 pushState()

افزودن یک state جدید به history.

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

🟢 replaceState()

جایگزین کردن state فعلی با یک state جدید.

history.replaceState({ page: 2 }, "title 2", "?page=2");

🔹 4. مدیریت رویداد popstate

وقتی کاربر با دکمه‌های Back یا Forward مرورگر جابه‌جا می‌شود، رویداد popstate فعال می‌شود.

window.onpopstate = function(event) {
  console.log("State:", event.state);
};

📌 این قابلیت برای ساخت Single Page Applications (SPA) بسیار مهم است.

🔹 5. مثال کاربردی

<button onclick="goPage1()">صفحه 1</button>
<button onclick="goPage2()">صفحه 2</button>

<script>
function goPage1() {
  history.pushState({ page: 1 }, "صفحه 1", "?page=1");
}

function goPage2() {
  history.pushState({ page: 2 }, "صفحه 2", "?page=2");
}

window.onpopstate = function(event) {
  if (event.state) {
    console.log("Page:", event.state.page);
  }
};
</script>

✅ خلاصه

• history.length → تعداد صفحات در تاریخچه

• back() / forward() → حرکت در history

• go(n) → جابه‌جایی در history با عدد مثبت/منفی

• ()pushState → افزودن state جدید بدون رفرش

• ()replaceState → جایگزینی state فعلی

• popstate → رویداد تغییر history