در HTML5 خیلی از موارد جدید اضافه شد که یکی از آنها تاریخچه یا history صفحه بود.

میخوام از یک api صحبت کنم که خیلی ساده میتونه شمارو برای تغییر آدرس صفحه بدون رفرش شدن کمک کنه. البته این موضوع در بعضی از مرورگر‌ها پوشش داده نمیشه که در لینک زیر مرورگرهای پشتیبانی شده را میبینید.

مرورگرهای پشتیبانی کننده ازhistory api

شما همینطور میتونید با کد زیر چک کنید که آیا مرورگر کاربر از این ویژگی ساپورت میکند یا نه..

function supports_history_api() {
  return !(window.history && history.pushState);
}

وقتی صحبت از تاریخچه صفحه میکنیم پس قطعا باید قبل و بعد از state یا وضعیت فعلیمون رو بتونیم کنترل کنیم که دو تابع زیر این کار را برای شما انجام میدهند. مانند next و back خودِ مرورگر

window.history.back(); //یک وضعیت قبل

window.history.forward(); //یک وضعیت بعد

window.history.go(3); //به 3 وضعیت بعد

window.history.go(-2); //به 2 وضعیت قبل
​

برای یک وضعیت جدید و تغییر آدرس URL صفحه میتوان از کد زیر استفاده کرد

history.pushState([data], [title], [url]);
//[data]: مقادیری که برای وضعیت درخواستی نیازمندیم
//[title]: عنوان وضعیت جدید
//[url]: آدرس وضعیت جدید
//مثال زیر
history.pushState({x:'is the best',y:'یک مقدار دیگر'}, 'radoo - hi', '/radoo');

بعضی مواقع لازم میشود وضعیت فعلی تغییری نداشته باشد اما نیاز به یک تغییر آدرس وجود دارد

history.replaceState(null, null, "/radoo2");

در هر مرحله میتوانید با استفاده از کد زیر میتوانید [data] وضعیت فعلی را دریافت کنید.

history.state

اگر با رادوو کار کرده باشید، بخش گروه‌ها و پین‌ها برای ویرایش پین‌ها و افزودن یک پین از این api استفاده میکند.

امیدوارم مفید واقع شود