Blog

JavaScript Web History API – সম্পূর্ণ বাংলা পরিচিতি

History API একটি গুরুত্বপূর্ণ Web API যা ব্যবহার করে আপনি ব্রাউজারের back ও forward button এর আচরণ নিয়ন্ত্রণ করতে পারেন এবং URL পরিবর্তন করতে পারেন পেজ রিলোড ছাড়াই। এটি মূলত Single Page Application (SPA) এর জন্য খুবই উপযোগী।

History API দিয়ে কী কী করা যায়?

• history.back() – আগের পৃষ্ঠায় ফিরে যাওয়া।
• history.forward() – পরবর্তী পৃষ্ঠায় যাওয়া।
• history.go(n) – নির্দিষ্ট সংখ্যক পৃষ্ঠায় যাওয়া।
• history.pushState() – নতুন URL push করা এবং অবজেক্ট সংরক্ষণ।
• history.replaceState() – বর্তমান state আপডেট করা।

উদাহরণ ১: Back, Forward ও Go

এই উদাহরণে back, forward এবং go ব্যবহার করা হয়েছে:

<button onclick="history.back()">Go Back</button>
<button onclick="history.forward()">Go Forward</button>
<button onclick="history.go(-2)">Go -2 Pages</button>

ব্যাখ্যা: এই বাটনগুলো ব্রাউজারের হিস্টোরি স্ট্যাক ব্যবহার করে পেছনে বা সামনের পৃষ্ঠায় যেতে সাহায্য করে। go(-2) মানে ২টি পেজ পেছনে যাওয়া।

উদাহরণ ২: pushState() ব্যবহার

নিচের কোডে URL পরিবর্তন করা হচ্ছে রিলোড ছাড়াই:

<button onclick="changeUrl()">Change URL</button>

<script>
function changeUrl() {
  history.pushState({ page: 1 }, "title 1", "?page=1");
  alert("URL updated without reloading the page!");
}
</script>

ব্যাখ্যা: এখানে history.pushState() ব্যবহার করে URL এ ?page=1 যোগ করা হয়েছে। পেজ রিলোড হয়নি কিন্তু URL আপডেট হয়েছে। এটা SPA অ্যাপ্লিকেশন তৈরিতে খুব গুরুত্বপূর্ণ।

উদাহরণ ৩: popstate ইভেন্ট

popstate ইভেন্ট ব্যবহার করে আমরা যখন ইউজার back বা forward বাটনে ক্লিক করে তখনকার স্টেট পেতে পারি:

<script>
window.addEventListener("popstate", function(event) {
  alert("State popped: " + JSON.stringify(event.state));
});
</script>

ব্যাখ্যা: যখন ইউজার back বা forward করে, তখন popstate ইভেন্ট ফায়ার হয় এবং আপনি আগে pushState দিয়ে পাঠানো state অবজেক্ট পেতে পারেন।

History API সংক্ষেপ

উপসংহার

Web History API হচ্ছে এমন একটি টুল যা দিয়ে আপনি ব্যবহারকারীর নেভিগেশন অভিজ্ঞতাকে আরো উন্নত করতে পারেন। বিশেষ করে SPA বা Ajax ভিত্তিক অ্যাপ্লিকেশনে এটি ব্যাপকভাবে ব্যবহৃত হয়। pushState() এবং popstate দিয়ে আপনি UI আপডেট না করেও ব্রাউজার হ্যান্ডেল করতে পারেন।