Browser Storage
localStorage, sessionStorage, cookies, IndexedDB — ব্রাউজারে ডেটা সংরক্ষণের উপায় বাংলায়।
ব্যবহারকারীর পছন্দ, কার্ট, session — এগুলো সার্ভারে না পাঠিয়ে ব্রাউজারেই রাখা যায়। এই পর্বে localStorage, sessionStorage, cookies ও IndexedDB-এর পার্থক্য শিখি।
localStorage
// রাখা
localStorage.setItem("theme", "dark");
// পড়া
const theme = localStorage.getItem("theme");
console.log(theme); // "dark"
// মুছা
localStorage.removeItem("theme");
localStorage.clear(); // সব মুছাlocalStorage বন্ধ করে আবার খুললেও থাকে — ৫–১০ MB scope। value সবসময় string — object-কে JSON.stringify করে রাখতে হয়।
sessionStorage
sessionStorage.setItem("temp", "123");
console.log(sessionStorage.getItem("temp")); // 123
// ট্যাব বন্ধ করলে মুছে যায়sessionStorage শুধু ওই ট্যাব/session-টির জন্য — ট্যাব বন্ধ করলে মুছে যায়। সংবেদনশীল, অস্থায়ী stuff-এর জন্য।
localStorage-এ object
const user = { name: "রহিম", score: 100 };
// রাখা (string)
localStorage.setItem("user", JSON.stringify(user));
// পড়া (object)
const parsed = JSON.parse(localStorage.getItem("user"));
console.log(parsed.name); // রহিমobject-কে string-এ transform করার জন্যই JSON.stringify — আবার পড়ার সময় JSON.parse। সবসময় try/catch করা ভালো (অতীত-ডেটা corrupt হতে পারে)।
Cookies
// set (JS-এ)
document.cookie = "theme=dark; path=/; max-age=86400";
// read — সব cookie-এর string
document.cookie; // "theme=dark; ..."
// delete
document.cookie = "theme=; path=/; max-age=0";Cookies রিকোয়েস্ট-এর সাথে সার্ভারে যায় (৪ KB), HttpOnly দিলে JS-এ অ্যাক্সেসও যায় না। session/auth ট্র্যাকিং-এ main ব্যবহার, কিন্তু bulk UI-প্রেফারেন্স-এ localStorage ভালো।
ক্ষমতার তুলনা
| বৈশিষ্ট্য | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| জায়গা | ~৫ MB | ~৫ MB | ~৪ KB |
| স্থায়ীত্ব | বন্ধ করলেও থাকে | ট্যাব বন্ধে মুছে | max-age অনুযায়ী |
| সার্ভারে যায় | না | না | হ্যাঁ (প্রতিটি request) |
| JS-এ পড়া | হ্যাঁ | হ্যাঁ | HttpOnly ছাড়া |
IndexedDB — বড় ডেটা
// খোলা — database
const request = indexedDB.open("myDB", 1);
request.onupgradeneeded = () => {
const db = request.result;
const store = db.createObjectStore("notes", { keyPath: "id" });
};
request.onsuccess = () => {
const db = request.result;
const tx = db.transaction("notes", "readwrite");
tx.objectStore("notes").put({ id: 1, text: "আইডিয়া" });
};IndexedDB GB-পর্যন্ত, complex queries ও offline app-এর ডেটার জন্য — localStorage-এর চেয়ে অনেক শক্তিশালী, কিন্তু API জটিল। ক্ষুদ্র ডেটায় localStorage-ই ঠিক।
storage event — tab সিঙ্ক
// অন্য ট্যাবে localStorage বদল হবে
window.addEventListener("storage", (e) => {
console.log("বদল হয়েছে:", e.key, e.newValue);
});storage event অন্য ট্যাবে localStorage বদল-এর alert দেয় — tab-গুলোর সমন্বয় (coordination) কাজে লাগে।
localStorage-এ password/token না রাখুন — XSS এড়াতে। সংবেদনশীল ডেটা HttpOnly cookie বা সার্ভারের জন্য।
"localStorage-এর সীমাবদ্ধতা?" — সংবেদনশীল নয় (XSS), sync API, string-only ও ~৫MB; বড় offline-এর জন্য IndexedDB।
একটি theme toggle বানান: পছন্দ localStorage-এ রাখুন, পরের visit-এ পুনরায়।