আমাদের বেসিক HTML সিরিজে আমরা ফর্ম, টেবিল, সেমান্টিক ট্যাগ — এসব শিখেছিলাম। কিন্তু একটা জিনিস তখন বাদ ছিল: ব্রাউজারে ডেটা মনে রাখা কীভাবে হয়? পেজ রিফ্রেশ করলে বা ব্রাউজার বন্ধ করে আবার খুললেও যদি ডেটা থেকে যায় — সেটা কীভাবে সম্ভব? এই পর্ব থেকে শুরু হচ্ছে আমাদের Advanced HTML সিরিজ, আর প্রথম টপিক হলো Web Storage API।
Web Storage API কী?
Web Storage API ব্রাউজারে ডেটা সংরক্ষণ করার একটা সহজ উপায় দেয় — কোনো ডাটাবেজ বা সার্ভার ছাড়াই। এতে দুইটা অবজেক্ট থাকে: localStorage আর sessionStorage। দুইটাই key-value ফরম্যাটে ডেটা রাখে, তবে দুইজনের আচরণে পার্থক্য আছে।
| বৈশিষ্ট্য | localStorage | sessionStorage |
|---|---|---|
| ডেটা কতক্ষণ থাকে | যতক্ষণ না নিজে মুছে ফেলছো | ট্যাব বন্ধ করলেই মুছে যায় |
| ব্রাউজার বন্ধ করলে | ডেটা থেকে যায় | ডেটা হারিয়ে যায় |
| শেয়ারিং | একই origin-এর সব ট্যাবে শেয়ার হয় | শুধু নিজের ট্যাবে সীমাবদ্ধ |
| সাধারণ ব্যবহার | থিম, লগইন টোকেন, সেটিংস | ফর্ম ড্রাফট, টেম্পোরারি স্টেট |
বেসিক মেথডগুলো
দুইটা স্টোরেজেরই একই মেথড আছে — শুধু নাম আলাদা (localStorage বা sessionStorage)।
// ডেটা সেভ করা
localStorage.setItem("username", "Arif");
// ডেটা পড়া
const name = localStorage.getItem("username");
console.log(name); // Arif
// একটা নির্দিষ্ট key মুছে ফেলা
localStorage.removeItem("username");
// সব ডেটা একসাথে মুছে ফেলা
localStorage.clear();
// কতগুলো key আছে সেটা জানা
console.log(localStorage.length);
টিপস: localStorage শুধু string সেভ করতে পারে। সংখ্যা বা বুলিয়ান দিলেও সেটা string-এ রূপান্তরিত হয়ে যাবে।
অবজেক্ট বা অ্যারে সেভ করা — JSON দিয়ে
যেহেতু শুধু string সেভ হয়, তাই কোনো অবজেক্ট বা অ্যারে সেভ করতে হলে আগে সেটাকে JSON.stringify() দিয়ে string বানাতে হয়, আর পড়ার সময় JSON.parse() দিয়ে ফেরত রূপান্তর করতে হয়।
const user = {
name: "Arif",
role: "Developer",
skills: ["HTML", "CSS", "JavaScript"]
};
// অবজেক্ট সেভ করা
localStorage.setItem("user", JSON.stringify(user));
// অবজেক্ট ফেরত পড়া
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // Arif
console.log(savedUser.skills[0]); // HTML
লাইভ ডেমো
নিচের বক্সে কিছু লিখে "সেভ করো" চাপো, তারপর পেজ রিফ্রেশ করেও দেখো — ডেটা থেকেই যাবে!
একটা সম্পূর্ণ উদাহরণ
চলো একটা ছোট্ট "থিম টগলার" বানাই যেটা ব্যবহারকারীর পছন্দ (লাইট/ডার্ক) মনে রাখবে, রিফ্রেশ করলেও।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8" />
<title>থিম টগলার</title>
</head>
<body>
<button id="themeBtn">থিম পাল্টাও</button>
<script>
const btn = document.getElementById("themeBtn");
// পেজ লোড হওয়ার সময় আগের থিম চেক করা
const savedTheme = localStorage.getItem("theme") || "light";
document.body.style.background = savedTheme === "dark" ? "#1a1a1a" : "#ffffff";
document.body.style.color = savedTheme === "dark" ? "#ffffff" : "#000000";
btn.addEventListener("click", () => {
const current = localStorage.getItem("theme") || "light";
const newTheme = current === "light" ? "dark" : "light";
document.body.style.background = newTheme === "dark" ? "#1a1a1a" : "#ffffff";
document.body.style.color = newTheme === "dark" ? "#ffffff" : "#000000";
// থিম সেভ করা যাতে রিফ্রেশ করলেও মনে থাকে
localStorage.setItem("theme", newTheme);
});
</script>
</body>
</html>
এখানে খেয়াল করো — পেজ লোড হওয়ার সাথে সাথে আগের সেভ করা থিম চেক করা হচ্ছে, আর বাটন ক্লিক করলে নতুন থিম localStorage-এ সেভ হয়ে যাচ্ছে।
নিজে চেষ্টা করো
Exercise:
- একটা ইনপুট বক্স আর বাটন বানাও, যেখানে ব্যবহারকারীর নাম
localStorage-এ সেভ হবে, আর পেজ লোড হলেই "স্বাগতম, [নাম]" লেখাটা দেখাবে। - একটা ছোট to-do তালিকা বানাও (শুধু অ্যারে হিসেবে), যেখানে নতুন টাস্ক যোগ করলে সেটা
JSON.stringify()দিয়েlocalStorage-এ সেভ হয়। sessionStorageব্যবহার করে একটা কাউন্টার বানাও যেটা ট্যাব খোলা থাকা পর্যন্ত বাড়তে থাকবে, কিন্তু নতুন ট্যাবে ০ থেকে শুরু হবে।- একটা বাটন বানাও যেটা চাপলে
localStorage.clear()কল করে সব সেভ করা ডেটা মুছে দেবে।
পরের পর্বে যা থাকছে
পরের পর্বে আমরা শিখব Canvas বেসিক — কীভাবে JavaScript দিয়ে সরাসরি ব্রাউজারে আঁকা যায়, শেপ বানানো যায়, আর সাধারণ গ্রাফিক্স তৈরি করা যায়।