Local Storage এবং Session Storage
ওয়েব ডেভেলপমেন্টে কাজ করার সময় প্রায়ই আমাদের দরকার হয় ব্রাউজারে ব্যবহারকারীর কিছু ডেটা সাময়িকভাবে সংরক্ষণ করার। যেমন – ব্যবহারকারীর নাম, থিম সেটিংস, লগইন টোকেন, কার্টে রাখা পণ্য ইত্যাদি। এই কাজটি করার জন্য আগে আমরা সাধারণত Cookies ব্যবহার করতাম। তবে এখন JavaScript এ আরও আধুনিক ও সহজ উপায় এসেছে – Local Storage এবং Session Storage।
এই দুটোকে একসাথে বলা হয় Web Storage API। আজ আমরা বিস্তারিত আলোচনা করব Local Storage এবং Session Storage নিয়ে – কীভাবে কাজ করে, কোথায় ব্যবহার করা যায়, এর সুবিধা-অসুবিধা, এবং উদাহরণসহ কোড।
Web Storage API কি?
Web Storage API হচ্ছে ব্রাউজারের একটি ফিচার, যা আমাদের ডেটা ব্রাউজারের ভেতরে key-value pair আকারে সংরক্ষণ করতে দেয়। এটি দুই রকমের হয়:
Local Storage
ডেটা স্থায়ীভাবে সংরক্ষণ হয়।
ব্রাউজার বন্ধ বা কম্পিউটার রিস্টার্ট হলেও ডেটা থেকে যায়।
Session Storage
ডেটা শুধুমাত্র একটি ট্যাব (session) পর্যন্ত থাকে।
ব্রাউজার ট্যাব বন্ধ করলে ডেটা মুছে যায়।
Local Storage কি?
Local Storage হলো এমন একটি জায়গা যেখানে ওয়েবসাইট ব্যবহারকারীর ব্রাউজারে ডেটা সংরক্ষণ করতে পারে স্থায়ীভাবে।
এর ডেটার মেয়াদ থাকে না।
ব্যবহারকারী ব্রাউজারের ক্যাশ মুছে না ফেলা পর্যন্ত ডেটা রয়ে যায়।
সাধারণত ব্যবহারকারীর প্রেফারেন্স, থিম সেটিংস, অথবা লগইন টোকেন সংরক্ষণের জন্য ব্যবহার করা হয়।
Capacity: প্রায় ৫MB পর্যন্ত ডেটা সংরক্ষণ করা যায় (প্রতিটি ডোমেইনের জন্য)।
Local Storage এ ডেটা সংরক্ষণের নিয়ম
1. ডেটা সেট করা
localStorage.setItem("username", "Mannan");
এখানে "username" হলো key এবং "Mannan" হলো value।
2. ডেটা পাওয়া
let user = localStorage.getItem("username");
console.log(user); // আউটপুট: Mannan
3. ডেটা মুছে ফেলা
localStorage.removeItem("username");
4. সব ডেটা ক্লিয়ার করা
localStorage.clear();
Session Storage কি?
Session Storage হলো এমন একটি জায়গা যেখানে ডেটা সংরক্ষিত হয় ব্রাউজার সেশনের জন্য।
একটি ট্যাব খোলা থাকা পর্যন্ত ডেটা থাকবে।
ট্যাব বা ব্রাউজার বন্ধ হয়ে গেলে ডেটা মুছে যাবে।
সাধারণত ব্যবহারকারীর সাময়িক ডেটা রাখার জন্য এটি ব্যবহার করা হয়। যেমন – ফর্মে ডেটা পূরণ করার সময় অস্থায়ীভাবে সংরক্ষণ করা।
Capacity: প্রায় ৫MB পর্যন্ত ডেটা সংরক্ষণ করা যায় (প্রতিটি ট্যাবের জন্য আলাদা করে)।
Session Storage এ ডেটা ব্যবহারের নিয়ম
1. ডেটা সেট করা
sessionStorage.setItem("cart", "5 items");
2. ডেটা পাওয়া
let cart = sessionStorage.getItem("cart");
console.log(cart); // আউটপুট: 5 items
3. ডেটা মুছে ফেলা
sessionStorage.removeItem("cart");
4. সব ডেটা ক্লিয়ার করা
sessionStorage.clear();
Local Storage বনাম Session Storage
| বিষয় | Local Storage | Session Storage |
| ডেটার মেয়াদ | স্থায়ী (cache না মুছা পর্যন্ত থাকে) | ট্যাব বন্ধ করলে মুছে যায় |
| Capacity | প্রায় ৫MB | প্রায় ৫MB |
| ব্যবহার ক্ষেত্র | থিম সেটিংস, লগইন টোকেন, ইউজার প্রেফারেন্স | সাময়িক ডেটা, ফর্ম ডেটা, কার্ট ডেটা |
| অ্যাক্সেস | একই ডোমেইনের সব ট্যাব থেকে পাওয়া যায় | শুধুমাত্র সেই ট্যাব থেকে পাওয়া যায় |
উদাহরণ – Local Storage দিয়ে থিম পরিবর্তন
ধরুন আমরা চাই ব্যবহারকারী ডার্ক থিম বেছে নিলে সেটি সংরক্ষিত থাকবে।
<button id="darkBtn">Dark Mode</button>
<button id="lightBtn">Light Mode</button>
<script>
const body = document.body;
// আগের থিম লোড করা
let theme = localStorage.getItem("theme");
if (theme) {
body.className = theme;
}
document.getElementById("darkBtn").onclick = () => {
body.className = "dark";
localStorage.setItem("theme", "dark");
};
document.getElementById("lightBtn").onclick = () => {
body.className = "light";
localStorage.setItem("theme", "light");
};
</script>
👉 এখানে ব্যবহারকারী একবার ডার্ক থিম বেছে নিলে ব্রাউজার বন্ধ করলেও আবার খোলার সময় ডার্ক থিম থাকবে।
উদাহরণ – Session Storage দিয়ে ফর্ম ডেটা সংরক্ষণ
<input type="text" id="name" placeholder="Enter your name">
<script>
const input = document.getElementById("name");
// আগে সংরক্ষিত ডেটা লোড করা
input.value = sessionStorage.getItem("name") || "";
// ইনপুটে টাইপ করলে ডেটা সংরক্ষণ করা
input.addEventListener("input", () => {
sessionStorage.setItem("name", input.value);
});
</script>
👉 এখানে ট্যাব বন্ধ করলে ডেটা মুছে যাবে, তবে একই ট্যাবে থাকলে ব্যবহারকারী ফর্ম রিফ্রেশ করলেও ডেটা থেকে যাবে।
Local Storage / Session Storage এর সুবিধা
সহজ ব্যবহারযোগ্য: কোনো সার্ভার-সাইড কোড লাগেনা।
বেশি ক্যাপাসিটি: Cookies এর তুলনায় অনেক বেশি ডেটা রাখা যায়।
দ্রুত কাজ করে: key-value pair এ ডেটা সংরক্ষণ হওয়ায় পারফরম্যান্স ভালো।
সিকিউরিটি: Cookies এর মতো প্রতিটি রিকোয়েস্টের সাথে সার্ভারে যায় না।
সীমাবদ্ধতা
শুধু স্ট্রিং সাপোর্ট করে: Object বা Array রাখতে হলে
JSON.stringify()এবংJSON.parse()ব্যবহার করতে হয়।সিকিউরিটি ঝুঁকি: খুব সংবেদনশীল ডেটা (যেমন পাসওয়ার্ড) রাখা ঠিক নয়।
সাইজ লিমিট: সর্বোচ্চ ৫MB এর মতো সীমাবদ্ধতা আছে।
JSON সহ Local Storage ব্যবহার
যেহেতু Local Storage শুধু string সাপোর্ট করে, তাই object বা array রাখতে হলে আগে সেটিকে JSON এ রূপান্তর করতে হয়।
let user = { name: "Mannan", age: 25 };
// Object কে JSON এ রূপান্তর করে সংরক্ষণ
localStorage.setItem("user", JSON.stringify(user));
// আবার JSON থেকে Object এ রূপান্তর
let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name); // আউটপুট: Mannan
কখন কোনটা ব্যবহার করবেন?
Local Storage:
থিম সেটিংস
লগইন টোকেন
ব্যবহারকারীর দীর্ঘমেয়াদী প্রেফারেন্স
Session Storage:
সাময়িক ফর্ম ডেটা
ট্যাব ভিত্তিক কার্ট ডেটা
এককালীন ব্যবহারযোগ্য তথ্য
Local Storage এবং Session Storage হলো ওয়েব ডেভেলপারদের জন্য অত্যন্ত কার্যকর একটি টুল। এর মাধ্যমে সহজেই ব্রাউজারের মধ্যে ডেটা সংরক্ষণ ও ব্যবহার করা যায়। Local Storage ডেটা দীর্ঘ সময়ের জন্য সংরক্ষণ করে, আর Session Storage অস্থায়ীভাবে একটি সেশনের জন্য ডেটা রাখে।
ডেভেলপার হিসেবে আমাদের বোঝা উচিত কোথায় কোনটি ব্যবহার করা ভালো হবে। সঠিকভাবে ব্যবহার করতে পারলে এটি ব্যবহারকারীর অভিজ্ঞতা অনেক উন্নত করতে পারে।
