pushState() এবং replaceState() দুটি JavaScript মেথড যা history অবজেক্টের অংশ এবং HTML5 History API এর মাধ্যমে ব্যবহৃত হয়। এই মেথড দুটি ব্যবহার করে আপনি ব্রাউজারের URL পরিবর্তন করতে পারেন এবং পেজ রিফ্রেশ না করেই ইউজার নেভিগেশন ট্র্যাক করতে পারেন।
1. History API কী?
History API এর মাধ্যমে আপনি পেজের URL পরিবর্তন করতে পারবেন, তবে এটি পেজটি রিফ্রেশ না করেই কাজ করবে। অর্থাৎ, ইউজার কোনো নতুন পেজে যাবেন না, শুধু URL পরিবর্তিত হবে। এটি মূলত স্পা (Single Page Application) তৈরির জন্য ব্যবহৃত হয়, যেখানে অ্যাপ্লিকেশনটির একটি নির্দিষ্ট পেজে URL পরিবর্তন হলেও সম্পূর্ণ পেজটি রিফ্রেশ করা হয় না।
2. pushState() মেথড
pushState() মেথডটি বর্তমান ব্রাউজারের ইতিহাসের স্ট্যাকের মধ্যে একটি নতুন এন্ট্রি যোগ করে। এটি ইউজারকে "পেছনে ফিরে যাওয়ার" সুবিধা দেয়, কারণ নতুন এন্ট্রির সাথে পূর্ববর্তী ইতিহাস বজায় থাকে।
Syntax:
history.pushState(state, title, url);
- state: একটি অবজেক্ট যা ইতিহাসের স্টেটে রাখা হয়। এটি ডাটা স্টোর করার জন্য ব্যবহৃত হয় (এটি সাধারণত URL সম্পর্কিত ডাটা হতে পারে)।
- title: এই প্যারামিটারটি বর্তমানে ব্রাউজার সমর্থিত না হলেও, এটি ঐতিহ্যগতভাবে পেজের শিরোনাম (title) হতে পারে।
- url: ব্রাউজারের URL যা পরিবর্তিত হবে (কিন্তু পেজ রিফ্রেশ হবে না)।
উদাহরণ:
// ব্রাউজারের URL পরিবর্তন করা
history.pushState({ page: 1 }, "page 1", "page1.html");
// ব্রাউজারে নতুন পেজ URL হিসেবে page1.html দেখাবে কিন্তু পেজ রিফ্রেশ হবে না।
3. replaceState() মেথড
replaceState() মেথডটি pushState() এর মতোই কাজ করে, তবে এটি বর্তমান ইতিহাসের এন্ট্রিকে প্রতিস্থাপন করে। এর মানে হলো, এটি পুরনো ইতিহাসের এন্ট্রিটিকে সরিয়ে দিয়ে নতুন স্টেট, শিরোনাম এবং URL সেট করে।
Syntax:
history.replaceState(state, title, url);
- state: ইতিহাসের নতুন স্টেট (অবজেক্ট)।
- title: পেজের নতুন শিরোনাম।
- url: নতুন URL যা ব্রাউজারের এড্রেস বারে প্রদর্শিত হবে।
উদাহরণ:
// ব্রাউজারের URL পরিবর্তন করে পূর্ববর্তী এন্ট্রি প্রতিস্থাপন
history.replaceState({ page: 2 }, "page 2", "page2.html");
// আগের URL চেঞ্জ হবে না, কিন্তু "page2.html" নতুন URL হিসেবে আসবে।
4. ব্যবহারিক উদাহরণ
ধরা যাক, আপনি একটি ওয়েব অ্যাপ্লিকেশন তৈরি করছেন যা বিভিন্ন ধাপে কাজ করে (steps). প্রতিটি স্টেপের জন্য ব্রাউজারের URL পরিবর্তন করতে হবে, যাতে ইউজার পরবর্তী ধাপে যাওয়ার পরেও ইতিহাসের ট্র্যাক থাকে। এখানে pushState() এবং replaceState() এর ব্যবহার দেখানো হলো:
ধাপ ১: pushState() ব্যবহার করে URL পরিবর্তন
// Step 1: pushState দিয়ে URL পরিবর্তন
function goToStep2() {
history.pushState({ step: 2 }, "Step 2", "step2.html");
document.getElementById('content').innerHTML = 'এটি Step 2';
}
// Step 2: pushState দিয়ে URL পরিবর্তন
function goToStep3() {
history.pushState({ step: 3 }, "Step 3", "step3.html");
document.getElementById('content').innerHTML = 'এটি Step 3';
}
এখানে, আপনি প্রথমে Step 2 তে যাবেন এবং ব্রাউজারের URL হবে step2.html, এরপর Step 3 এ গেলে URL হবে step3.html, তবে পেজ রিফ্রেশ হবে না।
ধাপ ২: replaceState() ব্যবহার করে URL পরিবর্তন
ধরা যাক, আপনি Step 2 এর মধ্যে URL পরিবর্তন করতে চান কিন্তু এটি ব্রাউজারের ইতিহাসে নতুন এন্ট্রি হিসেবে যোগ হতে না দিয়ে, বর্তমান এন্ট্রিটি প্রতিস্থাপন করতে চান। তাহলে আপনি replaceState() ব্যবহার করবেন।
// Step 2: replaceState দিয়ে URL পরিবর্তন (আগের এন্ট্রি প্রতিস্থাপন)
function updateStep2() {
history.replaceState({ step: 2 }, "Step 2", "step2.html");
document.getElementById('content').innerHTML = 'এটি Step 2 (আপডেটেড)';
}
এতে Step 2 এ URL পরিবর্তন হবে, কিন্তু এটি ইতিহাসের নতুন এন্ট্রি তৈরি করবে না। অর্থাৎ, আপনি যদি 'পেছনে ফিরে যান' ক্লিক করেন, তাহলে Step 1 এর আগের URLটি থাকবে না, শুধু Step 3 পর্যন্ত থাকবে।
5. eventListener ব্যবহার করে State ট্র্যাক করা
আপনি popstate ইভেন্টের মাধ্যমে pushState() এবং replaceState() দ্বারা তৈরি করা স্টেট পরিবর্তন ট্র্যাক করতে পারেন।
window.addEventListener('popstate', (event) => {
console.log("State Changed:", event.state);
});
এটি তখন কার্যকর হবে যখন ইউজার 'পেছনে ফিরে যাওয়ার' (back button) বা 'আগে যাওয়ার' (forward button) চেষ্টা করবে।
pushState(): ব্রাউজারের ইতিহাসে একটি নতুন এন্ট্রি যোগ করে এবং URL পরিবর্তন করে। এটি ইউজারকে "পেছনে ফিরে যাওয়ার" সুযোগ দেয়।replaceState(): বর্তমান ইতিহাসের এন্ট্রি প্রতিস্থাপন করে এবং URL পরিবর্তন করে, তবে এটি নতুন কোনো এন্ট্রি তৈরি করে না।- উভয় মেথডই পেজ রিফ্রেশ ছাড়াই URL পরিবর্তন করতে সাহায্য করে, যা রিয়েল-টাইম অ্যাপ্লিকেশন বা SPA-তে অত্যন্ত উপকারী।
Read more
