localStorage, sessionStorage, cookie আর IndexedDB — ব্রাউজারে ডেটা রাখা

১ · পাতা কেন সব ভুলে যায় — ব্রাউজারের চারটি তাক

একটি অনলাইন দোকানের কথা ভাবুন। নাদিয়া রাতে মোবাইলে তিনটি বই কার্টে রাখলেন, থিম বদলে “ডার্ক” করলেন, তারপর ঘুমিয়ে পড়লেন। সকালে আবার সাইট খুললেন — কার্ট খালি, থিম আবার সাদা। কারণ JavaScript-এর variable থাকে পাতার মেমরিতে; পাতা বন্ধ বা রিলোড হলে সেই মেমরি পুরো মুছে যায়। প্রতিবার পাতা খোলা মানে নতুন শুরু।

সমাধানের দুটি পথ। এক, ডেটা সার্ভারে পাঠিয়ে ডেটাবেসে রাখা (পর্ব ৩৫-এর fetch দিয়ে) — এতে লগইন লাগে, ইন্টারনেট লাগে। দুই, ডেটা ব্যবহারকারীর নিজের ডিভাইসে, ব্রাউজারের ভেতরে রাখা। এর জন্য ব্রাউজার কয়েকটি জায়গা দেয়, যাদের আকার, আয়ু, পরিসর আর API আলাদা। ঠিক কাজে ঠিক তাক বাছাই এই পর্বের মূল দক্ষতা।

সবার ওপরের নিয়ম — origin

পর্ব ৩৫-এ দেখেছেন, ব্রাউজার একটি ঠিকানাকে তিন ভাগে দেখে: scheme (https), host (shop.example.com) আর port (443). তিনটির জোড়ই origin. Web Storage আর IndexedDB পুরোপুরি origin ধরে ভাগ করা — প্রতিটি origin-এর নিজস্ব আলাদা ঘর। এটি same-origin policy-রই অংশ।

Cookie একটু আলাদা — চলে domain আর path ধরে, scheme বা port ধরে নয় (অংশ ৫)। আর মনে গেঁথে নিন: origin-এর দেয়াল অন্য সাইট-কে আটকায়, কিন্তু আপনার পাতায় চলা যেকোনো script — আপনার কোড, analytics, বিজ্ঞাপন, বা XSS দিয়ে ঢোকা দুষ্ট কোড — এই storage পড়তে-লিখতে পারে। ব্যবহারকারীও DevTools খুলে সব দেখতে, বদলাতে, মুছতে পারেন।

২ · localStorage — string রাখার ছোট আলমারি

localStorage হলো Web Storage-এর স্থায়ী অংশ — একটি key-value তালিকা, যেখানে key আর value দুটোই string. API মাত্র কয়েকটি:

localStorage.setItem("theme", "dark");   // রাখা (থাকলে বদলে দেয়)
localStorage.getItem("theme");           // "dark"
localStorage.getItem("nothing");         // null — key নেই
localStorage.length;                     // কয়টি key আছে
localStorage.key(0);                     // ০ নম্বর key-এর নাম (ক্রমের নিশ্চয়তা নেই)
localStorage.removeItem("theme");        // একটি মোছা
localStorage.clear();                    // এই origin-এর সব মোছা

localStorage.theme = "dark" লিখেও কাজ চলে, কিন্তু এড়িয়ে চলুন — key বা length নামের key রাখলে method-এর সাথে নাম মিলে গোলমাল হয়। সবচেয়ে বড় ফাঁদ হলো string-only নিয়ম: যা দেবেন, ব্রাউজার আগে তাকে string বানাবে। সংখ্যা 3 হয় "3", true হয় "true", array [1, 2] হয় "1,2", object হয় "[object Object]" — ডেটা চিরতরে হারায়। তাই কাঠামোবদ্ধ ডেটার জন্য পর্ব ১৯-এর serialization: রাখার আগে JSON.stringify, পড়ার পর JSON.parse. পুরো যাত্রাটি ধাপে ধাপে দেখুন:

1const cart = { items: [{ id: "p7", qty: 2 }], at: new Date(T0), note: undefined };2const text = JSON.stringify(cart);3localStorage.setItem("cart", text);4// ...ব্যবহারকারী পাতা রিলোড করলেন...5const raw = localStorage.getItem("cart");6const back = JSON.parse(raw);7console.log(typeof back.at, "note" in back);

Synchronous আর ছোট — দুটি সীমা

localStorage-এর API synchronous — getItem ফল হাতে দিয়েই ফেরে। লিখতে সহজ, কিন্তু মূল্য আছে: ব্রাউজারকে ডেটা ডিস্ক থেকে পড়ে আনতে হয়, আর সেই সময় main thread আটকে থাকে (পর্ব ৩১)। কয়েক KB-তে কেউ টের পায় না; কিন্তু কয়েক MB-এর JSON প্রতিবার stringify/parse করলে স্ক্রল আর ক্লিক ঝাঁকুনি দেয়। আর Web Worker (পর্ব ৪২) বা service worker (পর্ব ৪৪) থেকে localStorage ব্যবহারই করা যায় না — সেখানে IndexedDB.

আকারের সীমা মানদণ্ডে নির্দিষ্ট নয়; বাস্তবে প্রধান ব্রাউজারগুলো প্রতি origin-এ মোটামুটি ৫ MB-এর কাছাকাছি দেয়। সীমা পেরোলে setItem ছোড়ে QuotaExceededError নামের DOMException. তাই localStorage “ছোট সেটিং”-এর জায়গা, ছবি বা পণ্যের পুরো ক্যাটালগের নয়।

যখন localStorage থাকেই না — নিরাপদ মোড়ক

এবার একটি বাস্তব কথা, যা অনেক টিউটোরিয়াল এড়িয়ে যায়: localStorage শব্দটি পড়তে গেলেই exception আসতে পারে। ব্যবহারকারী ব্রাউজারের সেটিংসে সাইট-ডেটা বন্ধ রেখেছেন, পাতা চলছে কোনো sandbox করা iframe-এ, পুরোনো Safari-র private মোডে quota ছিল শূন্য, বা ডিস্ক ভরা — যেকোনো এক কারণে পুরো অ্যাপ সাদা পাতা হয়ে যেতে পারে। এই কোর্সের কোড চালানোর বাক্সটিও আসলে একটি sandbox করা iframe — তাই নিচের কোড এখানে চালালে আপনি নিজের চোখেই fallback দেখবেন:

function createSafeStorage() {
  try {
    const ls = window.localStorage;          // বন্ধ থাকলে এখানেই exception
    ls.setItem("__probe__", "1"); ls.removeItem("__probe__");   // লেখা যায় কি না
    return { store: ls, kind: "localStorage" };
  } catch (e) {
    console.log("fallback →", e.name + ":", e.message);
    const map = new Map();                   // একই API, শুধু মেমরিতে
    return { kind: "memory", store: {
      getItem: (k) => (map.has(String(k)) ? map.get(String(k)) : null),
      setItem: (k, v) => void map.set(String(k), String(v)),
      removeItem: (k) => void map.delete(String(k)),
      clear: () => map.clear(),
      key: (i) => [...map.keys()][i] ?? null,
      get length() { return map.size; },
    } };
  }
}
const { store, kind } = createSafeStorage();
console.log("ব্যবহার হচ্ছে:", kind);
store.setItem("theme", "dark"); store.setItem("qty", 3);   // দ্বিতীয়টিতে number দিলাম
console.log(store.getItem("qty"), typeof store.getItem("qty"), store.length, store.key(0));
store.setItem("cart", { id: 1 });            // object দিলাম — JSON ছাড়া
console.log(store.getItem("cart"), store.getItem("missing"));

৩ · sessionStorage আর storage event — ট্যাবের হিসাব

sessionStorage-এর API হুবহু localStorage-এর মতো — setItem, getItem, সব একই, string-only নিয়মও একই। পার্থক্য শুধু পরিসর আর আয়ু-তে:

• প্রতিটি ট্যাবের নিজের: একই সাইট দুটি ট্যাবে খুললে দুটির sessionStorage আলাদা — এক ট্যাবে লেখা অন্যটি দেখে না।
• রিলোডে টেকে, ট্যাব বন্ধে মোছে: পাতা রিলোড বা একই ট্যাবে অন্য পাতায় গিয়ে ফিরে এলে ডেটা থাকে। ট্যাব বন্ধ করলে শেষ। (অনেক ব্রাউজার “বন্ধ ট্যাব আবার খুলুন”-এ sessionStorage-ও ফিরিয়ে আনে।)
• Duplicate করলে কপি: ট্যাবে ডান-ক্লিক করে “Duplicate” চাপলে নতুন ট্যাব তখনকার sessionStorage-এর একটি কপি পায় — তারপর থেকে দুটি আলাদা পথে চলে। সাধারণ লিংক নতুন ট্যাবে খুললে সাধারণত নতুন, খালি sessionStorage.

কোথায় কাজে লাগে? কয়েক ধাপের চাকরির আবেদন ফর্মের মাঝের অবস্থা, বা একটি ট্যাবে চলা পরীক্ষার বর্তমান প্রশ্ন — যে তথ্য শুধু এই ট্যাবের কাজের জন্য। দুই ট্যাবে দুটি আলাদা বুকিং চললে sessionStorage তাদের গুলিয়ে ফেলে না, localStorage ফেলত।

storage event — অন্য ট্যাবকে খবর দেওয়া

ধরুন নাদিয়ার দুটি ট্যাবে একই দোকান খোলা। একটিতে তিনি থিম “ডার্ক” করলেন। অন্য ট্যাবটি কীভাবে জানবে? localStorage বদলালে ব্রাউজার একই origin-এর অন্য সব খোলা পাতায় একটি storage event পাঠায়। মজার নিয়ম হলো, যে পাতা লিখল, সে নিজে event পায় না:

// প্রতিটি ট্যাবে — অন্য ট্যাবে থিম বা লগইন বদলালে সাড়া দেওয়া
window.addEventListener("storage", (e) => {
  if (e.storageArea !== localStorage) return;
  if (e.key === "theme") document.documentElement.dataset.theme = e.newValue ?? "light";
  if (e.key === "auth:loggedOut") location.assign("/login.html");
});

শুধু “বদলেছে” খবর নয়, ট্যাবগুলোর মধ্যে নিয়মিত বার্তা পাঠাতে আরও পরিষ্কার API আছে — BroadcastChannel. এটি storage-এ কিছু লেখে না, শুধু একই origin-এর অন্য ট্যাবে বার্তা পৌঁছায়।

৪ · বাস্তব নকশা — কার্ট, থিম, খসড়া, সংস্করণ আর মেয়াদ

API জানা সহজ অংশ। কঠিন অংশ ছয় মাস পরের কথা ভাবা: নতুন সংস্করণে কার্টের আকার বদলালে পুরোনো ডিভাইসের পুরোনো ডেটার কী হবে? তাই অভিজ্ঞরা কাঁচা ডেটা রাখেন না, রাখেন একটি “খাম”-এর ভেতরে — সাথে সংস্করণ নম্বর (migration-এর জন্য) আর মেয়াদ (TTL). নিচের কোডে আগের অংশের মেমরি-fallback-এর ছোট রূপ ব্যবহার করা হয়েছে, আর সময় স্থির রাখা হয়েছে যাতে ফল প্রতিবার একই আসে:

const mem = new Map();                       // safeStorage-এর fallback-এর ছোট রূপ
const store = { getItem: (k) => mem.get(k) ?? null, setItem: (k, v) => mem.set(k, String(v)) };
const VERSION = 2, HOUR = 3_600_000;
const T0 = Date.UTC(2026, 9, 19, 4, 0);      // স্থির সময়: ১৯ অক্টোবর ২০২৬, ঢাকায় সকাল ১০টা

function save(key, data, now, ttl) {
  store.setItem(key, JSON.stringify({ v: VERSION, expiresAt: now + ttl, data }));
}
function load(key, now) {
  let box;
  try { box = JSON.parse(store.getItem(key)); } catch { return "ভাঙা ডেটা"; }
  if (box === null) return "নেই";
  if (box.v === 1) box = { v: 2, expiresAt: now + 24 * HOUR, data: { items: box.items } }; // migration
  if (now >= box.expiresAt) return "মেয়াদ শেষ";
  return box.data;
}
save("cart", { items: [{ id: "p7", qty: 2 }], at: new Date(T0), note: undefined }, T0, 24 * HOUR);
console.log(store.getItem("cart"));
console.log(JSON.stringify(load("cart", T0 + 2 * HOUR)));
console.log(load("cart", T0 + 25 * HOUR), "|", load("wishlist", T0));
store.setItem("old", '{"v":1,"items":[{"id":"p1","qty":1}]}');
store.setItem("bad", '{"v":2,"data":');
console.log(JSON.stringify(load("old", T0)), "|", load("bad", T0));

চারটি চেনা নকশা

১. ডার্ক মোড — পাতা আঁকার আগেই। থিম localStorage-এ রাখুন, আর পড়ুন <head>-এর একটি ছোট inline script-এ, যাতে পাতা প্রথমে সাদা দেখিয়ে তারপর কালো না হয় (এই ঝলকানিকে বলে “flash of wrong theme”). কিছু রাখা না থাকলে ব্যবহারকারীর সিস্টেমের পছন্দ মানুন:

let saved = null;
try { saved = localStorage.getItem("theme"); } catch {}   // storage বন্ধ থাকলেও পাতা চলবে
const dark = saved ? saved === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
document.documentElement.dataset.theme = dark ? "dark" : "light";

২. লম্বা অভিযোগের ফর্ম — খসড়া নিজে থেকে সেভ। কেউ দশ মিনিট ধরে অভিযোগ লিখলেন, তারপর লোডশেডিংয়ে ল্যাপটপ বন্ধ — সব লেখা গেল। সমাধান: টাইপ থামার আধা সেকেন্ড পরে খসড়া রাখা — পর্ব ৩৬-এর debounce. Submit হলে খসড়া মুছুন। পাসওয়ার্ড, কার্ড বা NID নম্বরের field খসড়ায় রাখবেন না।

const form = document.querySelector("#complaint");
const KEY = "draft:complaint";
let timer;
form.addEventListener("input", () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const data = Object.fromEntries(new FormData(form));   // পর্ব ৩৯
    try { localStorage.setItem(KEY, JSON.stringify(data)); } catch { /* জায়গা নেই — চুপচাপ বাদ */ }
  }, 500);
});
form.addEventListener("submit", () => localStorage.removeItem(KEY));

৩. “সম্প্রতি দেখা পণ্য” — সর্বোচ্চ ১০টি। নতুন পণ্য সামনে, পুরোনো একই পণ্য থাকলে সরিয়ে দিন, আর তালিকা ১০-এ কেটে দিন — নইলে বছরের পর বছর বাড়তেই থাকবে:

function addRecent(id) {
  let list = [];
  try { list = JSON.parse(localStorage.getItem("recent")) ?? []; } catch {}
  if (!Array.isArray(list)) list = [];                       // কেউ হাতে বদলালেও টিকবে
  const next = [id, ...list.filter((x) => x !== id)].slice(0, 10);
  localStorage.setItem("recent", JSON.stringify(next));
  return next;
}
// addRecent("p3") → ["p3"];  তারপর addRecent("p9") → ["p9","p3"];  আবার addRecent("p3") → ["p3","p9"]

৪. কার্ট — কিন্তু সত্যের উৎস সার্ভার। লগইন ছাড়া কার্ট localStorage-এ রাখা প্রচলিত, কিন্তু ব্যবহারকারী DevTools খুলে price বদলে ১ টাকা করতে পারেন। তাই রাখুন শুধু পণ্যের ID আর পরিমাণ; দাম, স্টক আর ছাড় চেকআউটে সার্ভারেই হিসাব হবে।

৫ · Cookie — প্রতিটি request-এ সাথে যাওয়া চিরকুট

Web Storage আসার প্রায় ১৫ বছর আগে থেকে ব্রাউজারে ডেটা রাখার একমাত্র উপায় ছিল cookie. কিন্তু cookie মূলত JavaScript-এর জন্য বানানো হয়নি — বানানো হয়েছিল সার্ভারের জন্য। HTTP নিজে কিছু মনে রাখে না: প্রতিটি request আলাদা, সার্ভার জানে না এটি একই ক্রেতা কি না। Cookie সেই সমস্যার সমাধান — সার্ভার উত্তরের সাথে Set-Cookie header (পর্ব ৩৫-এর HTTP header) পাঠায়, ব্রাউজার তা জমায়, আর পরের প্রতিটি request-এ Cookie header-এ ফেরত পাঠায়। পুরো জীবনচক্র দেখুন:

HTTP/1.1 200 OK
Content-Type: application/json
Set-Cookie: sid=8f3a9c…; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=1209600
Set-Cookie: lang=bn; Path=/; Max-Age=31536000; SameSite=Lax

নাম   মান        Domain              Path  মেয়াদ        পতাকা
sid   8f3a9c…    shop.example.com    /     ১৪ দিন পরে    Secure HttpOnly Lax
lang  bn         shop.example.com    /     ১ বছর পরে     Lax

GET /cart HTTP/1.1
Host: shop.example.com
Cookie: sid=8f3a9c…; lang=bn

GET /images/logo.png HTTP/1.1      ← ছবির request-এও একই cookie যায়
Cookie: sid=8f3a9c…; lang=bn

> document.cookie
'lang=bn'          ← sid নেই! script দেখতেই পায় না

> document.cookie = "sid=hacked"
HttpOnly cookie script দিয়ে বদলানোও যায় না

evil.example থেকে shop.example.com-এ লুকানো POST ফর্ম
  → sid পাঠানো হয় না (cross-site POST)

অন্য সাইটের লিংকে ক্লিক করে shop.example.com-এ যাওয়া (GET)
  → sid পাঠানো হয় — ক্রেতা লগইন অবস্থায় পৌঁছান

লগআউটের উত্তর:
Set-Cookie: sid=; Path=/; Max-Age=0; Secure; HttpOnly; SameSite=Lax
  → ব্রাউজার sid মুছে ফেলে

অথবা ১৪ দিন পার → মেয়াদ শেষ, ব্রাউজার নিজেই মোছে
(সার্ভারেও session বাতিল করতে হবে — শুধু cookie মোছা যথেষ্ট নয়)

Attribute-গুলো এক নজরে

document.cookie — বিশ্বের অদ্ভুততম API-গুলোর একটি

JavaScript থেকে cookie-র পুরোনো API document.cookie — একটি property, যা পড়লে আর লিখলে দুই রকম আচরণ করে। পড়লে পান সব (HttpOnly ছাড়া) cookie একটি string-এ: "lang=bn; cartId=C-9" — শুধু নাম আর মান, attribute নয়। লিখলে পুরোটা বদলায় না, বরং একটি cookie যোগ বা বদল হয়। মুছতে হয় মেয়াদ শেষ করে, আর তখন Path ও Domain হুবহু মেলাতে হয় — নইলে নীরবে কিছুই হয় না।

// লেখা — প্রতিবার একটি cookie; মান encode করুন
document.cookie = "lang=" + encodeURIComponent("bn") + "; Path=/; Max-Age=31536000; SameSite=Lax; Secure";

// পড়া — split(";") বা split("=") সরাসরি ব্যবহার করবেন না
function getCookie(name) {
  for (const part of document.cookie.split("; ")) {
    const i = part.indexOf("=");                       // মানের ভেতরেও "=" থাকতে পারে
    if (part.slice(0, i) === name) return decodeURIComponent(part.slice(i + 1));
  }
  return null;
}

// মোছা — একই Path দিয়ে মেয়াদ শূন্য
document.cookie = "lang=; Path=/; Max-Age=0";

সাধারণ ভুলগুলো: split(";") করলে প্রতিটি অংশের শুরুতে একটি ফাঁকা থেকে যায়, তাই " lang" আর "lang" মেলে না; split("=") করলে base64 মানের শেষের == কেটে যায়; আর আলাদা Path-এ একই নামের দুটি cookie থাকলে দুটোই আসে, কোনটি কার তা বোঝার উপায় নেই। তাই নতুন একটি API এসেছে — Cookie Store API: await cookieStore.get("lang") একটি object দেয় (নাম, মান, মেয়াদ, domain…), কাজ করে Promise দিয়ে, আর service worker-এও চলে। Chromium-ভিত্তিক ব্রাউজারে এটি ২০২০ সাল থেকে আছে, অন্য ব্রাউজারে সমর্থন সাম্প্রতিক — ব্যবহারের আগে "cookieStore" in window দিয়ে যাচাই করুন।

Third-party cookie — বিজ্ঞাপন, ট্র্যাকিং আর বদলে যাওয়া পরিকল্পনা

আপনি news.example পড়ছেন, আর পাতায় একটি বিজ্ঞাপন-কোম্পানির iframe বা ছবি আছে ads.tracker.example থেকে। সেই request-এর সাথে ads.tracker.example-এর cookie গেলে, তা হলো third-party cookie — আপনি যে সাইটে আছেন তার নয়, তৃতীয় পক্ষের। একই tracker হাজারো সাইটে থাকলে সে একই cookie দিয়ে আপনাকে সাইট থেকে সাইটে অনুসরণ করতে পারে। এই কারণে Safari (২০২০ সাল থেকে পুরোপুরি) আর Firefox (Total Cookie Protection, ডিফল্টে ২০২২ থেকে) third-party cookie আটকায় বা প্রতিটি সাইটের জন্য আলাদা করে রাখে।

Chrome-এর গল্প আঁকাবাঁকা। ২০২০ সালে Google ঘোষণা দেয়, দুই বছরের মধ্যে third-party cookie তুলে দেবে; কয়েকবার পিছিয়ে ২০২৪ সালের শুরুতে মাত্র ১% ব্যবহারকারীর জন্য বন্ধ করে পরীক্ষা চালায়। ২০২৪ সালের জুলাইয়ে পরিকল্পনা বদলায় — পুরো বন্ধ না করে ব্যবহারকারীকে বেছে নিতে দেওয়ার কথা বলে, আর ২০২৫ সালে জানায় আলাদা নতুন prompt-ও আনবে না। অর্থাৎ এই লেখার সময় Chrome-এ ডিফল্টে third-party cookie চালু, অন্য প্রধান ব্রাউজারে আটকানো। নীতি আবার বদলাতে পারে — তাই নিজের অ্যাপ এমনভাবে বানান যেন third-party cookie ছাড়াই চলে। পাশাপাশি ব্রাউজারগুলো iframe-এর storage-কে উপরের সাইট ধরে আলাদা রাখছে (storage partitioning) — একই tracker দুটি সাইটে দুটি আলাদা localStorage পায়।

৬ · IndexedDB — ব্রাউজারের ভেতরের ডেটাবেস

একটি অ্যাপ ভাবুন, যা দিয়ে বিক্রয়কর্মী গ্রামের বাজারে অর্ডার নেন — নেটওয়ার্ক কখনো আছে, কখনো নেই। কয়েক হাজার পণ্যের ছবিসহ ক্যাটালগ ডিভাইসে রাখতে হবে, নেট ছাড়াও অর্ডার নিতে হবে, নেট ফিরলে পাঠাতে হবে। localStorage-এর ৫ MB, string-only আর synchronous API — তিনটিই এখানে বাধা। এই কাজের জন্যই IndexedDB.

• Object store: SQL-এর টেবিলের মতো, তবে সারি নয়, পুরো JavaScript object রাখে — Date, Map, array, এমনকি Blob (ছবি, PDF). রাখার সময় পর্ব ১৯-এর structured clone হয়, JSON নয় — তাই Date থাকে Date (তবে function রাখা যায় না)।
• Key: প্রতিটি record-এর অনন্য চাবি — object-এর একটি field (keyPath, যেমন "id") বা নিজে থেকে বাড়া সংখ্যা (autoIncrement).
• Index: অন্য field দিয়ে দ্রুত খোঁজার ব্যবস্থা — যেমন status দিয়ে “সব pending অর্ডার”, বা দামের একটি সীমার পণ্য।
• Transaction: প্রতিটি পড়া-লেখা একটি transaction-এর ভেতরে — হয় সব কাজ একসাথে সফল, নয়তো কোনোটিই নয় — অর্ডার রাখা আর স্টক কমানোর অর্ধেক কখনো ডিস্কে থাকবে না।
• Asynchronous: ফল আসে পরে event-এ (onsuccess, onerror); main thread আটকায় না, worker থেকেও চলে।

API-টি ২০১০-এর দশকের শুরুর নকশা — Promise তখনো ভাষায় আসেনি (এসেছে ES2015-এ), তাই সব event দিয়ে। একটি অর্ডার রাখার পুরো প্রবাহ ধাপে ধাপে:

1const req = indexedDB.open("shop", 2);2req.onupgradeneeded = (e) => {3  const os = req.result.createObjectStore("outbox", { keyPath: "id" });4  os.createIndex("byStatus", "status");5};6req.onsuccess = () => {7  const tx = req.result.transaction("outbox", "readwrite");8  tx.objectStore("outbox").put({ id: "o-101", status: "pending", total: 63500 });9  tx.oncomplete = () => console.log("অর্ডার জমা আছে");10};

Promise-এ মুড়ে নেওয়া — অফলাইন অর্ডারের সারি

Event-ভিত্তিক API বড় কোডে দ্রুত জট পাকায়, তাই বাস্তবে সবাই একে Promise-এ মোড়েন (পর্ব ৩৩–৩৪)। নিচের কোড একটি “outbox” বানায়: নেট না থাকলে অর্ডার এখানে জমে, নেট ফিরলে পাঠানো হয়। এটি পাতার sandbox-এ চলবে না — যেকোনো সাধারণ ওয়েবসাইট খুলে DevTools console-এ (F12) পেস্ট করে দেখুন, তারপর Application ট্যাবের IndexedDB অংশে ডেটা দেখতে পাবেন:

function openDB() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open("shop", 2);
    req.onupgradeneeded = (e) => {
      const db = req.result;
      if (e.oldVersion < 1) db.createObjectStore("products", { keyPath: "id" });
      if (e.oldVersion < 2) db.createObjectStore("outbox", { keyPath: "id" })
                              .createIndex("byStatus", "status");
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
    req.onblocked = () => reject(new Error("অন্য ট্যাবে পুরোনো সংস্করণ খোলা"));
  });
}
const done = (tx) => new Promise((res, rej) => {
  tx.oncomplete = () => res(); tx.onerror = tx.onabort = () => rej(tx.error);
});

async function queueOrder(order) {                     // নেট না থাকলেও কাজ করে
  const db = await openDB();
  const tx = db.transaction("outbox", "readwrite");
  tx.objectStore("outbox").put({ ...order, status: "pending", createdAt: new Date() });
  await done(tx);
}
async function pendingOrders() {
  const db = await openDB();
  const req = db.transaction("outbox").objectStore("outbox").index("byStatus").getAll("pending");
  return new Promise((res, rej) => { req.onsuccess = () => res(req.result); req.onerror = () => rej(req.error); });
}

await queueOrder({ id: "o-101", items: [{ id: "p7", qty: 2 }], total: 63500 });
console.log(await pendingOrders());
// প্রত্যাশিত আউটপুট: [ { id: "o-101", items: [...], total: 63500, status: "pending", createdAt: Date } ]

Cache API আর জায়গার হিসাব

আরেকটি storage আছে, যা পরের দিকে বিস্তারিত দেখবেন: Cache API. এটি HTTP request আর response জোড়া রাখে — caches.open("v1"), তারপর cache.put(request, response). পাতার HTML, CSS, ছবি অফলাইনে দেখাতে service worker এটি ব্যবহার করে (পর্ব ৪৪)। নিয়ম মোটামুটি: ফাইল আর API-র উত্তর Cache API-তে, অ্যাপের ডেটা IndexedDB-তে।

IndexedDB আর Cache API মিলে এক origin কত জায়গা পায়? মানদণ্ড একে বলে storage quota, আর তা ব্রাউজার আর ডিস্কের খালি জায়গার ওপর নির্ভর করে — অনেক ক্ষেত্রে কয়েক GB পর্যন্ত। আন্দাজ না করে জিজ্ঞেস করুন (এটিও sandbox-এ চলবে না, console-এ চালান):

const { usage, quota } = await navigator.storage.estimate();
console.log(`${(usage / 1e6).toFixed(1)} MB ব্যবহার, সীমা প্রায় ${(quota / 1e9).toFixed(1)} GB`);

const persisted = await navigator.storage.persist();   // "জায়গা কম হলে আমার ডেটা মুছো না"
console.log(persisted);                                // true বা false — ব্রাউজারের সিদ্ধান্ত
// প্রত্যাশিত আউটপুট (ডিভাইসভেদে আলাদা): "0.3 MB ব্যবহার, সীমা প্রায় 120.5 GB" আর true/false

ডিফল্টে সব storage “best-effort” — ডিস্কে জায়গা ফুরোলে ব্রাউজার কম ব্যবহৃত origin-এর ডেটা না জানিয়েই মুছতে পারে। persist() অনুরোধ করে ডেটাকে persistent করতে; রাজি হবে কি না, ব্রাউজার সাইটের ব্যবহার দেখে ঠিক করে। তাই মূল্যবান ডেটার একমাত্র কপি কখনো ব্রাউজারে নয় — সুযোগ পেলেই সার্ভারে পাঠান।

৭ · নিরাপত্তা, গোপনীয়তা আর পুরো তুলনা

Token কোথায় রাখবেন — একটি পুরোনো বিতর্ক

লগইনের পর সার্ভার অনেক সময় একটি token দেয় — প্রায়ই JWT. বহু টিউটোরিয়াল (আর AI) লেখে localStorage.setItem("token", jwt), তারপর প্রতিটি fetch-এ Authorization header-এ পাঠায়। সমস্যা হলো, পাতায় একবার XSS ঘটলে (পর্ব ৪৩) দুষ্ট script এক লাইনে token পড়ে বাইরে পাঠাতে পারে, আর মেয়াদ থাকা পর্যন্ত অন্য কম্পিউটার থেকে আপনার নামে কাজ চলে।

প্রচলিত সুপারিশ: session-এর পরিচয় রাখুন HttpOnly; Secure; SameSite=Lax (বা Strict) cookie-তে. Script তা পড়তেই পারে না, তাই চুরির পথ বন্ধ। তবে XSS থাকলে দুষ্ট script ব্যবহারকারীর পাতা থেকেই request পাঠাতে পারে, আর cookie নিজে থেকে যায় বলে CSRF-এর দিকেও নজর লাগে। তাই আসল শিক্ষা: XSS ঠেকানোই প্রথম কাজ; storage-এর সিদ্ধান্ত ক্ষতির পরিমাণ কমায়, ঝুঁকি শূন্য করে না। বিস্তারিত — XSS, CSP আর cookie-র নিরাপত্তা — পর্ব ৪৩-এ।

আর storage থেকে পড়া সব ডেটাকে ব্যবহারকারীর ইনপুটের মতোই দেখুন: দাম বা admin অনুমতি সার্ভারে যাচাই করুন, আর পাতায় দেখাতে textContent ব্যবহার করুন (পর্ব ৩৭)।

গোপনীয়তা — ITP, মুছে ফেলা আর সম্মতি

ব্রাউজারগুলো এখন গোপনীয়তা রক্ষায় storage-এর ওপর নিজেরাই নিয়ম বসায়। সবচেয়ে কড়া Safari-র ITP (Intelligent Tracking Prevention, ২০১৭ থেকে)। ২০২০ সাল থেকে Safari-তে script দিয়ে লেখা storage — localStorage, IndexedDB, document.cookie-এর cookie ইত্যাদি — মুছে যেতে পারে, যদি ৭ দিন Safari ব্যবহারের মধ্যে ব্যবহারকারী সাইটে এসে একবারও কিছুতে ক্লিক বা ট্যাপ না করেন (হোম স্ক্রিনে যোগ করা ওয়েব অ্যাপে নিয়ম আলাদা)। অর্থাৎ iPhone-এ localStorage “চিরস্থায়ী” নয়। সাধারণ ক্ষেত্রে সার্ভারের header দিয়ে বসানো cookie এই সীমার বাইরে।

ব্যবহারকারী নিজেও যেকোনো সময় সাইট-ডেটা মুছতে পারেন, private বা incognito জানালা বন্ধ হলেই সব মোছে, আর সার্ভার লগআউটে Clear-Site-Data header পাঠিয়ে ঐ origin-এর ডেটা মুছতে বলতে পারে। আইনের দিকও আছে: ইউরোপের GDPR (২০১৮) আর ePrivacy নিয়মে ব্যবহারকারীকে চেনা বা ট্র্যাক করার মতো cookie বা storage-এর আগে সাধারণত সম্মতি লাগে — তাই এত সাইটে “cookie banner”. সাইট চালানোর জন্য একেবারে দরকারি জিনিস (কার্ট, লগইন) সাধারণত ছাড় পায়।

পুরো তুলনা

৮ · AI-এর যুগে — storage কোডে AI-এর চেনা ভুল

“লগইন বানাও” বা “কার্ট সেভ করো” বললে AI প্রায় সবসময় localStorage ধরে নেয় — সবচেয়ে সহজ, আর অসংখ্য টিউটোরিয়ালে তাই লেখা। ডেমোতে কোড চমৎকার চলে; সমস্যা দেখা দেয় বাস্তবে: Safari-তে এক সপ্তাহ পরে ডেটা নেই, storage বন্ধ, পুরোনো ফরম্যাটে সাদা পাতা, বা token চুরির পথ।

AI-এর লেখা storage কোড — যাচাইয়ের চেকলিস্ট

• কোথাও পাসওয়ার্ড, token, OTP বা ব্যক্তিগত নম্বর localStorage/sessionStorage-এ রাখা হয়নি
• প্রতিটি JSON.parse try/catch-এ, পরে আকার যাচাই আর ডিফল্ট আছে
• Storage-এ প্রথম হাত দেওয়া try/catch-এ মোড়া; storage বন্ধ থাকলেও অ্যাপ চলে
• ডেটার আকার বুঝে জায়গা বাছা হয়েছে — কয়েক KB-এর বেশি বা Blob হলে IndexedDB
• Cookie পড়া-লেখায় encode/decode আছে; লগইন cookie সার্ভার বসায় HttpOnly দিয়ে
• সংরক্ষিত ডেটায় সংস্করণ আর দরকার হলে মেয়াদ আছে; দাম বা অনুমতি সার্ভার থেকে নতুন করে আসে
• নিজে পরীক্ষা করেছি: DevTools-এর Application ট্যাবে ডেটা বদলে বা মুছে দিয়ে, আর একটি private জানালায়