IndexedDB আর্কিটেকচার ও ক্লায়েন্ট-সাইড ডেটাবেস: LocalStorage-এর সীমাবদ্ধতা পেরিয়ে পূর্ণাঙ্গ CRUD ও অফলাইন-ফার্স্ট গাইড

ব্রাউজার ডেটা পারসিস্টেন্সের বাস্তব সংকট: আধুনিক ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশন ডিজাইন করার সময় ডেভেলপারদের অন্যতম বড় সিদ্ধান্ত নিতে হয়—ইউজারের ডেটা ব্রাউজারের ভেতর কীভাবে দীর্ঘমেয়াদে সংরক্ষণ (Persist) করা হবে। ব্রাউজার আমাদের একাধিক স্টোরেজ মেকানিজম প্রদান করে, কিন্তু বাস্তব প্রোডাকশনে জটিল ও বড় আকারের স্ট্রাকচার্ড ডেটা হ্যান্ডেল করতে গিয়ে বেশিরভাগ ডেভেলপার মারাত্মক পারফরম্যান্স সংকটে পড়েন। বিশেষ করে কুকি (Cookie) এবং লোকাল স্টোরেজ (LocalStorage)-এর ওপর অন্ধ নির্ভরতা বড় অ্যাপ্লিকেশনে ইউজার ইন্টারফেসকে সরাসরি ল্যাগ বা ফ্রিজ করে দেয়।

এই সীমাবদ্ধতাগুলোকে চিরতরে দূর করার জন্যই ব্রাউজারে যুক্ত করা হয়েছে IndexedDB (ইনডেক্সড-ডিবি)। এটি কোনো সাধারণ স্টোরেজ নয়, বরং ব্রাউজারের ভেতরে সরাসরি বিল্ট-ইন থাকা একটি সম্পূর্ণ অ্যাসিনক্রোনাস, ট্রানজেকশন-বেসড ও ইনডেক্স-সাপোর্টেড ক্লায়েন্ট-সাইড NoSQL ডেটাবেস ইঞ্জিন। এই আর্টিকেলে আমরা থিওরিটিক্যাল আলোচনার পাশাপাশি একটি পূর্ণাঙ্গ ইউজার ম্যানেজমেন্ট ডেটা লেয়ারের আর্কিটেকচারাল ইমপ্লিমেন্টেশন, অবজেক্ট স্টোর ডিজাইন, কি-পাথ ও ইনডেক্সিং কনসেপ্ট এবং বাস্তব CRUD অপারেশনের সম্পূর্ণ কোড বিশ্লেষণ করব।

১. LocalStorage ও Cookie কেন রিয়েল-ওয়ার্ল্ড অ্যাপ্লিকেশনে স্কেল করে না?

ব্রাউজারে ডেটা রাখার জন্য কুকি, লোকাল স্টোরেজ ও ইনডেক্সড-ডিবির নাম শোনা গেলেও এগুলোর উদ্দেশ্য ও মেমোরি আর্কিটেকচার সম্পূর্ণ ভিন্ন। বড় ডেটাসেটের ক্ষেত্রে কুকি ও লোকাল স্টোরেজ কেন অচল হয়ে পড়ে, তা বোঝা প্রতিটি ফ্রন্টএন্ড ইঞ্জিনিয়ারের জন্য আবশ্যিক:

• কুকির সীমাবদ্ধতা (HTTP Overhead): কুকি মূলত তৈরি হয়েছিল খুব ছোট আকারের ক্লায়েন্ট-সাইড স্টেট (যেমন সেশন আইডি) সংরক্ষণ এবং প্রতি এইচটিটিপি রিকোয়েস্টের সাথে স্বয়ংক্রিয়ভাবে সার্ভারে পাঠানোর জন্য। কুকির সর্বোচ্চ ধারণক্ষমতা মাত্র ৪ কিলোবাইট (4 KB)। তাই অ্যাপ্লিকেশনের আর্বিট্রি স্ট্রাকচার্ড রেকর্ডস বা বড় ডেটা সেটের জন্য কুকি ব্যবহারের কোনো সুযোগ নেই।
• লোকাল স্টোরেজের মেইন-থ্রেড ব্লকিং (Synchronous Trap): লোকাল স্টোরেজ ব্যবহার করা অত্যন্ত সহজ—একটি কি (Key) দিয়ে ভ্যালু রাখা যায় এবং কি ধরে তুলে আনা যায়। কিন্তু ওয়েব স্টোরেজ এপিআই সম্পূর্ণ সিনক্রোনাস (Synchronous)। অর্থাৎ ব্রাউজার যখন লোকাল স্টোরেজ থেকে বড় কোনো ডেটা রিড বা রাইট করে, তখন জাভাস্ক্রিপ্টের মেইন থ্রেড (Single-threaded Event Loop) আটকে যায়। ফলে ব্যবহারকারীর অ্যানিমেশন ড্রপ করে এবং বাটন ক্লিক রেসপন্স বন্ধ হয়ে ইউআই ফ্রিজ হয়ে যায়।
• স্ট্রিং সিরিয়ালাইজেশন ওভারহেড: লোকাল স্টোরেজে কেবল স্ট্রিং রাখা যায়। কোনো অবজেক্ট বা অ্যারে রাখতে হলে প্রতিবার JSON.stringify() এবং রিড করার সময় JSON.parse() করতে হয়। হাজার হাজার রেকর্ডের ক্ষেত্রে এই পার্সিং মেমোরির বিশাল ওভারহেড তৈরি করে।
• ইনডেক্সিং ও কোয়েরি সুবিধার অভাব: লোকাল স্টোরেজে কোনো ইনডেক্স মেকানিজম নেই। ধরুন, আপনার কাছে ৫,০০০ ইউজারের ডেটা আছে এবং আপনাকে একটি সুনির্দিষ্ট ইমেইল এড্রেস দিয়ে ইউজারকে খুঁজতে হবে। লোকাল স্টোরেজে কোনো ইনডেক্স পাথ না থাকায় পুরো ৫,০০০ ডেটা মেমোরিতে টেনে এনে অ্যাপ্লিকেশনের ভেতর লুপ চালিয়ে ফিল্টার করতে হয়, যা চরম অপেশাদার ও ধীরগতির।

২. IndexedDB-এর অভ্যন্তরীণ আর্কিটেকচার ও লাইফসাইকেল ফ্লো

ইনডেক্সড-ডিবি একটি লো-লেভেল এপিআই। ব্রাউজার এখানে save() বা find()-এর মতো হাই-লেভেল অ্যাবস্ট্রাকশন দিয়ে জটিলতা আড়াল করে না। ডেটাবেস ওপেন করা, স্কিমা ডিফাইন করা, অবজেক্ট স্টোর তৈরি করা, ট্রানজেকশন হ্যান্ডেল করা এবং রেজাল্ট প্রসেস করার প্রতিটি বিল্ডিং ব্লক ডেভেলপারকে নিয়ন্ত্রণ করতে হয়। এর ফলে ব্রাউজারের ক্লায়েন্ট-সাইড ডেটা লেয়ারের ওপর নিখুঁত নিয়ন্ত্রণ বজায় থাকে।

ইনডেক্সড-ডিবির হায়ারার্কি ও অপারেশনাল ফ্লো নিচের মতো পাঁচ ধাপে কাজ করে:

Database (ডেটাবেস) ➔ Transaction (ট্রানজেকশন) ➔ Object Store (অবজেক্ট স্টোর) ➔ Request (রিকোয়েস্ট) ➔ Result (ফলাফল)

রিলেশনাল ডেটাবেসের সাথে তুলনা করলে আর্কিটেকচারটি খুব পরিষ্কার হয়ে যায়:

• Database: প্রধান ডেটাবেস ইন্সট্যান্স (যেমন: LWSDB), যার একটি নির্দিষ্ট ভার্সন নম্বর থাকে।
• Object Store (অবজেক্ট স্টোর): এসকিউএল ডেটাবেসের টেবিল (Table)-এর অনুরূপ। এখানে আমাদের সব রেকর্ড জাভাস্ক্রিপ্ট অবজেক্ট আকারে জমা থাকে।
• Key ও keyPath: রিলেশনাল ডেটাবেসের প্রাইমারি কি (Primary Key)। যেমন keyPath: 'id' দিয়ে স্বয়ংক্রিয়ভাবে autoIncrement: true নির্ধারণ করলে ব্রাউজার নিজেই প্রতিটি নতুন রেকর্ডের জন্য অনন্য আইডি তৈরি করে নেয়।
• Index (সেকেন্ডারি ইনডেক্স): প্রাইমারি কি ছাড়াও বিকল্প প্রপার্টি (যেমন email) দিয়ে দ্রুততম সময়ে রেকর্ড খুঁজে বের করার বি-ট্রি (B-Tree) সার্চ পাথ।

৩. ডেটাবেস কানেকশন ও স্কিমা ইনিশিয়ালাইজেশন (onupgradeneeded)

ইনডেক্সড-ডিবিতে সরাসরি ডেটাবেস অবজেক্ট পাওয়া যায় না। প্রথমে একটি রিকোয়েস্ট তৈরি করতে হয় এবং তার ইভেন্ট লাইফসাইকেল হ্যান্ডেল করতে হয়:

let db = null; function openDatabase() {    const request = indexedDB.open('LWSDB', 1);    // কোনো ত্রুটি হলে    request.onerror = function(event) {        console.error('ডেটাবেস ওপেন করতে ব্যর্থ:', event.target.error);    };    // সফলভাবে কানেকশন ওপেন হলে    request.onsuccess = function(event) {        db = event.target.result;        console.log('ডেটাবেস সফলভাবে ওপেন হয়েছে');        displayAllUsers(); // পূর্বের ডেটা লোড    };    // ডেটাবেস তৈরি বা ভার্সন আপগ্রেড হলে (স্কিমা তৈরির একমাত্র জায়গা)    request.onupgradeneeded = function(event) {        const dbInstance = event.target.result;        // ইউজারস অবজেক্ট স্টোর আগে থেকে না থাকলে তৈরি করা        if (!dbInstance.objectStoreNames.contains('users')) {            const objectStore = dbInstance.createObjectStore('users', {                keyPath: 'id',                autoIncrement: true            });            // ইমেইলের জন্য ইউনিক সেকেন্ডারি ইনডেক্স তৈরি            objectStore.createIndex('emailIndex', 'email', { unique: true });        }    }; } document.addEventListener('DOMContentLoaded', openDatabase);

আর্কিটেকচারাল রুল: createObjectStore এবং createIndex সাধারণ রিড/রাইট অপারেশনের ভেতরে চালানো যায় না। এগুলো শুধুমাত্র onupgradeneeded ইভেন্টের ভেতর ভার্সন চেঞ্জ কন্টেক্সটেই এক্সিকিউট করতে হয়।

৪. প্রমিস-বেসড পূর্ণাঙ্গ CRUD ডেটা লেয়ার ইমপ্লিমেন্টেশন

যেহেতু ইনডেক্সড-ডিবির প্রতিটি রিকোয়েস্ট অ্যাসিনক্রোনাস এবং ইভেন্ট-ড্রিভেন, আধুনিক ক্লিন কোড বজায় রাখার জন্য প্রতিটি ফাংশনকে Promise দিয়ে র‍্যাপ করা সর্বোত্তম সফটওয়্যার ইঞ্জিনিয়ারিং প্র্যাকটিস।

ক. সকল রেকর্ড রিড করা (getAllUsers)

ইউজার ইন্টারফেসে তালিকা প্রদর্শনের জন্য রিড-অনলি ট্রানজেকশনের মাধ্যমে সব রেকর্ড রিট্রিভ করার মেকানিজম:

function getAllUsers() {    return new Promise((resolve, reject) => {        const transaction = db.transaction(['users'], 'readonly');        const objectStore = transaction.objectStore('users');        const request = objectStore.getAll();        request.onsuccess = () => resolve(request.result);        request.onerror = () => reject(request.error);    }); }

খ. নতুন রেকর্ড ইনসার্ট করা (addUser)

নতুন ইউজার সংরক্ষণের জন্য রিড-রাইট ট্রানজেকশন প্রয়োজন। এখানে id স্বয়ংক্রিয়ভাবে ব্রাউজার জেনারেট করবে:

function addUser(userData) {    const transaction = db.transaction(['users'], 'readwrite');    const objectStore = transaction.objectStore('users');    const record = {        ...userData,        createdAt: new Date().toISOString()    };    const request = objectStore.add(record);    request.onsuccess = function() {        console.log('নতুন ইউজার সংরক্ষিত হয়েছে, আইডি:', request.result);        displayAllUsers(); // ইউআই রিফ্রেশ    };    request.onerror = function() {        console.error('ইউজার সংরক্ষণ ব্যর্থ হয়েছে:', request.error);    }; }

গ. নির্দিষ্ট একটি রেকর্ড আনা (getUser)

এডিট মডালে ডেটা পপুলেট করার জন্য প্রাইমারি কি (ID) ধরে সিঙ্গেল রেকর্ড খোঁজা:

function getUser(userId) {    return new Promise((resolve, reject) => {        const transaction = db.transaction(['users'], 'readonly');        const objectStore = transaction.objectStore('users');        const request = objectStore.get(Number(userId));        request.onsuccess = () => resolve(request.result);        request.onerror = () => reject(request.error);    }); }

ঘ. এক্সিস্টিং রেকর্ড আপডেট করা (updateUser)

ইনডেক্সড-ডিবিতে আপডেট করার জন্য put() মেথড ব্যবহৃত হয়। অবজেক্টের ভেতর বিদ্যমান id দেখে ডিবি স্বয়ংক্রিয়ভাবে পুরোনো রেকর্ড প্রতিস্থাপন করে:

function updateUser(userId, updatedData) {    const transaction = db.transaction(['users'], 'readwrite');    const objectStore = transaction.objectStore('users');    const updatedRecord = {        id: Number(userId),        ...updatedData,        updatedAt: new Date().toISOString()    };    const request = objectStore.put(updatedRecord);    request.onsuccess = function() {        console.log('ইউজার সফলভাবে আপডেট হয়েছে');        displayAllUsers();    };    request.onerror = function() {        console.error('আপডেট ব্যর্থ হয়েছে:', request.error);    }; }

ঙ. রেকর্ড মুছে ফেলা (deleteUser)

প্রাইমারি কি পাস করে নির্দিষ্ট রেকর্ড ডিলিট করা:

function deleteUser(userId) {    const transaction = db.transaction(['users'], 'readwrite');    const objectStore = transaction.objectStore('users');    const request = objectStore.delete(Number(userId));    request.onsuccess = function() {        console.log('ইউজার সফলভাবে ডিলিট হয়েছে');        displayAllUsers();    };    request.onerror = function() {        console.error('ডিলিট ব্যর্থ হয়েছে:', request.error);    }; }

৫. সেকেন্ডারি ইনডেক্স ব্যবহার করে হাই-স্পিড সার্চ (searchByEmail)

বাস্তব অ্যাপ্লিকেশনে সব সময় প্রাইমারি আইডি দিয়ে ডেটা খোঁজা যায় না। ব্যবহারকারীর ইমেইল দিয়ে খুঁজতে হলে ইনডেক্সড-ডিবির সেকেন্ডারি ইনডেক্স অসাধারণ পারফরম্যান্স দেয়:

function searchByEmail(email) {    return new Promise((resolve, reject) => {        const transaction = db.transaction(['users'], 'readonly');        const objectStore = transaction.objectStore('users');                // অবজেক্ট স্টোর থেকে পূর্বে তৈরি করা ইনডেক্স এক্সেস করা        const emailIndex = objectStore.index('emailIndex');                // ইনডেক্সের ওপর সরাসরি get কুয়েরি চালানো        const request = emailIndex.get(email.trim());        request.onsuccess = () => resolve(request.result);        request.onerror = () => reject(request.error);    }); }

এই মেকানিজমে হাজার হাজার রেকর্ডের পুরো স্টোর স্ক্যান করতে হয় না। ব্রাউজার সরাসরি ইনডেক্স ট্রি ব্যবহার করে মিলিসেকেন্ডের ভগ্নাংশে কাঙ্ক্ষিত রেকর্ড ফিরিয়ে দেয়।

৬. ক্রোম ডেভটুলসে লাইভ ডেটাবেস ভেরিফিকেশন

কোড বাস্তবায়নের পর ব্রাউজারের ডেভটুলস দিয়ে সরাসরি ডেটাবেস পরীক্ষা করা যায়:

1. ব্রাউজারে F12 চেপে ডেভটুলস ওপেন করুন।
2. উপরের মেনু থেকে Application ট্যাবে প্রবেশ করুন।
3. বাম পাশের সাইডবার থেকে Storage সেকশনের নিচে থাকা IndexedDB এক্সপ্যান্ড করুন।
4. সেখানে আপনার ডেটাবেসের নাম (যেমন LWSDB) এবং তার নিচে users অবজেক্ট স্টোর দেখতে পাবেন।
5. users সিলেক্ট করলে ডাটাবেসের প্রতিটি রো, প্রাইমারি আইডি, টাইমস্ট্যাম্প ও ভ্যালু রিয়েল-টাইমে টেবিল আকারে দেখা যাবে। প্রয়োজনে কোনো রো সিলেক্ট করে সরাসরি ডিলিট বা ক্লিয়ারও করা যায়।

৭. প্রোডাকশন অফলাইন-ফার্স্ট আর্কিটেকচার ও PWA গাইডলাইন

রিয়েল-ওয়ার্ল্ড এন্টারপ্রাইজ অ্যাপ্লিকেশনে ইনডেক্সড-ডিবি মূলত অফলাইন-ফার্স্ট (Offline-First Architecture) ডিজাইনে মেরুদণ্ড হিসেবে কাজ করে:

• নেটওয়ার্ক ফেইলিউর ও ব্যাকগ্রাউন্ড সিঙ্ক: ইউজার যখন অফলাইনে থাকে বা দুর্বল ইন্টারনেটে কাজ করে, তখন ফর্ম সাবমিশন বা ট্রানজেকশন পেলোড ইনডেক্সড-ডিবিতে জমা রাখা হয়। ইন্টারনেট সক্রিয় হওয়ার সাথে সাথে সার্ভিস ওয়ার্কার (Service Worker) ব্যাকগ্রাউন্ডে সেই ডেটা সার্ভারের সাথে সিঙ্ক করে নেয়।
• ম্যাসিভ এপিআই ক্যাশিং: বড় ড্যাশবোর্ড বা গ্রাফিক্যাল অ্যানালিটিক্স অ্যাপ্লিকেশনে বড় সাইজের রেসপন্স ইনডেক্সড-ডিবিতে ক্যাশ করা থাকে, ফলে দ্বিতীয়বার পেজ লোড হতে এক মুহূর্তও সময় লাগে না।
• প্রোডাকশন লাইব্রেরি রেকমেন্ডেশন: ভ্যানিলা ইনডেক্সড-ডিবির ইভেন্ট কলব্যাক বড় প্রজেক্টে দীর্ঘ কোড তৈরি করে। তাই প্রোডাকশনে কাজ করার সময় গুগলের তৈরি লাইটওয়েট প্রমিস র‍্যাপার idb অথবা Dexie.js ব্যবহার করা একটি আদর্শ সফটওয়্যার ইঞ্জিনিয়ারিং সিদ্ধান্ত।

সাধারণ জিজ্ঞাসা (FAQ)

প্রশ্ন: IndexedDB-তে সর্বোচ্চ কত মেগাবাইট বা গিগাবাইট ডেটা রাখা যায়?
উত্তর: লোকাল স্টোরেজের মতো এর কোনো ফিক্সড ৫ মেগাবাইট সীমা নেই। ইনডেক্সড-ডিবি সাধারণত ডিভাইসের ফ্রি ডিস্ক স্পেসের ওপর নির্ভর করে। আধুনিক ব্রাউজারে এটি মোট খালি জায়গার ৬০% পর্যন্ত (কয়েক শত গিগাবাইট পর্যন্ত) ডেটা সংরক্ষণ করতে পারে।

প্রশ্ন: ব্রাউজারের ইনকগনিটো বা প্রাইভেট উইন্ডোতে IndexedDB কীভাবে কাজ করে?
উত্তর: প্রাইভেট বা ইনকগনিটো মোডে ইনডেক্সড-ডিবি সম্পূর্ণভাবে কাজ করে, তবে এটি মেমোরিতে (RAM) সাময়িকভাবে থাকে। প্রাইভেট উইন্ডোটি বন্ধ করার সাথে সাথেই সংরক্ষিত সমস্ত ডেটা স্বয়ংক্রিয়ভাবে চিরতরে মুছে যায়।

প্রশ্ন: মাল্টি-ট্যাবে একই সাথে ডেটাবেস ওপেন থাকলে ভার্সন কনফ্লিক্ট কীভাবে প্রতিরোধ করা হয়?
উত্তর: যদি কোনো একটি ট্যাবে ডেটাবেসের ভার্সন আপগ্রেড করার রিকোয়েস্ট আসে, তবে অন্য ট্যাবে onversionchange ইভেন্ট ফায়ার হয়। সেখানে ডেভেলপারকে পুরনো কানেকশন ক্লোজ (db.close()) করতে হয় যাতে নতুন স্কিমা কোনো বাধা ছাড়া চালু হতে পারে।

অফিশিয়াল তথ্যসূত্র ও সহায়ক লিংক

• ডব্লিউথ্রিসি অফিশিয়াল স্পেসিফিকেশন: w3.org/TR/IndexedDB
• এমডিএন ওয়েব ডকস: developer.mozilla.org/IndexedDB_API
• গুগল ওয়েব ডেভ ইঞ্জিনিয়ারিং গাইড: web.dev/articles/indexeddb
• গুগল ক্রোম ডেভটুলস স্টোরেজ ডকুমেন্টেশন: developer.chrome.com/docs/devtools/storage/indexeddb