জাভাস্ক্রিপ্ট এবং ইনডেক্সডডিবি

জাভাস্ক্রিপ্ট এবং ইনডেক্সডডিবি

এই প্রবন্ধে আমরা জাভাস্ক্রিপ্ট এবং ইনডেক্সডডিবি ব্যাখ্যা করব।

এই টিউটোরিয়ালে জাভাস্ক্রিপ্ট এবং IndexedDB এর ধাপে ধাপে ব্যাখ্যা দেওয়া হয়েছে, যেখানে প্রতিটি ধাপে ব্যবহারিক নমুনা কোডও রয়েছে যাতে আপনার বোঝাপড়া গভীর হয়।

YouTube Video

javascript-indexed-db.html
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args
119                    .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
120                    .join(" ");
121                output.appendChild(message);
122            };
123
124            // Override console.error
125            const originalError = console.error;
126            console.error = function (...args) {
127                originalError.apply(console, args);
128                const message = document.createElement('div');
129                message.textContent = args
130                    .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
131                    .join(" ");
132                message.style.color = 'red'; // Color error messages red
133                output.appendChild(message);
134            };
135        })();
136
137        document.getElementById('executeBtn').addEventListener('click', () => {
138            // Prevent multiple loads
139            if (document.getElementById('externalScript')) return;
140
141            const script = document.createElement('script');
142            script.src = 'javascript-indexed-db.js';
143            script.id = 'externalScript';
144            //script.onload = () => console.log('javascript-indexed-db.js loaded and executed.');
145            //script.onerror = () => console.log('Failed to load javascript-indexed-db.js.');
146            document.body.appendChild(script);
147        });
148    </script>
149</body>
150</html>

জাভাস্ক্রিপ্ট এবং ইনডেক্সডডিবি

IndexedDB একটি অ্যাসিনক্রোনাস কী-ভ্যালু সংরক্ষণকারী ডাটাবেস, যা ব্রাউজারে বিল্ট-ইন থাকে। এটি রিলেশনাল ডাটাবেসের মতো বৈশিষ্ট্য প্রদান করে এবং ক্লায়েন্ট সাইডে বড় পরিমাণ গঠনমূলক ডেটা সংরক্ষণ ও অনুসন্ধান করতে দেয়। এটি বিশেষ করে অফলাইন-সক্ষম অ্যাপ্লিকেশন এবং PWA (প্রগ্রেসিভ ওয়েব অ্যাপস) এর জন্য উপযোগী।

IndexedDB-এর বৈশিষ্ট্য

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

ডাটাবেস খুলা ও তৈরি করা

IndexedDB ব্যবহার করতে হলে আপনাকে প্রথমে একটি ডাটাবেস খুলতে হবে। যদি এটি না থাকে, তবে স্বয়ংক্রিয়ভাবে তৈরি করা হয়।

1const request = indexedDB.open('MyDatabase', 1); // Specify DB name and version
  • open মেথডটি ডাটাবেস অ্যাসিনক্রোনাসভাবে খুলে এবং নিচের তিনটি ইভেন্ট চালু করে।

onsuccess

1// Fired when database is successfully opened
2request.onsuccess = (event) => {
3    const db = event.target.result; // Database instance
4    console.log('Database opened successfully:', db.name);
5};
  • ডাটাবেস সফলভাবে খুললে onsuccess ইভেন্ট চালু হয়। এই মুহূর্তে পাওয়া request.result ব্যবহার করে পরবর্তী অপারেশনগুলো সম্পাদন করা উচিত।

onerror

1// Fired when database fails to open
2request.onerror = (event) => {
3    console.error('Failed to open database:', event.target.error);
4};
  • ডাটাবেস খুলতে ব্যর্থ হলে onerror ইভেন্ট চালু হয়। এখানে ত্রুটি লগিং ও ত্রুটি পরিচালনা করা উচিত।

onupgradeneeded

 1// Fired when database is newly created or upgraded
 2request.onupgradeneeded = (event) => {
 3    const db = event.target.result;
 4    console.log('Database upgrade needed (or newly created):', db.name);
 5
 6    // Example: Create an object store (like a table) if it doesn’t exist
 7    if (!db.objectStoreNames.contains('users')) {
 8        db.createObjectStore('users', { keyPath: 'id' });
 9        console.log('Object store "users" created');
10    }
11};
  • ডাটাবেস নতুন তৈরি হলে অথবা নির্দিষ্ট সংস্করণ বর্তমানের চেয়ে বেশি হলে onupgradeneeded চালু হয়। এই সময়েই টেবিল (অবজেক্ট স্টোর) তৈরি ও স্কিমা সংজ্ঞায়িত করা উচিত।

একটি অবজেক্ট স্টোর তৈরি করা

প্রথমে, onupgradeneeded এর মধ্যে একটি 'অবজেক্ট স্টোর' (টেবিলের সমতুল্য) তৈরি করুন।

1request.onupgradeneeded = function (event) {
2    const db = event.target.result;
3    console.log("onupgradeneeded triggered. Database version:", db.version);
4    if (!db.objectStoreNames.contains('users')) {
5        console.log("Creating object store: users");
6        const store = db.createObjectStore('users', { keyPath: 'id' });
7        store.createIndex('name', 'name', { unique: false });
8    }
9};

এখানে নিম্নলিখিত সেটিংস প্রয়োগ করা হয়:।

  • createObjectStore createObjectStore হল ডাটাবেসে নতুন অবজেক্ট স্টোর তৈরির একটি পদ্ধতি। আপনি অবজেক্ট স্টোরে রেকর্ড সংরক্ষণ করতে পারেন এবং keyPath ও অন্যান্য অপশন নির্ধারণ করে ডেটা ব্যবস্থাপনা নিয়ন্ত্রণ করতে পারেন। এই প্রক্রিয়াটি অবশ্যই onupgradeneeded ইভেন্টের মধ্যে করতে হবে।

  • keyPath: 'id' keyPath কে id প্রপার্টিতে সেট করুন, যা প্রতিটি রেকর্ডকে একটি প্রাইমারি হিসাবে স্বতন্ত্রভাবে চিহ্নিত করে। এর ফলে ডেটা যোগ, অনুসন্ধান বা আপডেট করার সময় স্বয়ংক্রিয়ভাবে id ব্যবহার করা যায়।

  • createIndex অনুসন্ধানের জন্য name প্রোপার্টি ভিত্তিক ইনডেক্স করতে createIndex পদ্ধতি ব্যবহার করুন। unique: false সেট করলে একই name সহ একাধিক রেকর্ড অনুমোদিত হয়।

সফল ডাটাবেস সংযোগ পরিচালনা

সফল ডাটাবেস সংযোগ হলে onsuccess ইভেন্টে কার্যক্রম নির্ধারণ করুন। এই প্রক্রিয়ার মধ্যে আপনি ডাটাবেস উদাহরণ পাচ্ছেন এবং ডেটা পড়া ও লেখার জন্য প্রস্তুতি নিচ্ছেন।

1request.onsuccess = function (event) {
2    const db = event.target.result;
3    console.log('Database opened successfully');
4    // Use db for reading and writing in subsequent operations
5};
  • এই প্রক্রিয়া সম্পন্ন হয় যখন IndexedDB ডাটাবেস সংযোগ সফলভাবে সম্পন্ন হয়।

  • event.target.result-এ খোলা ডাটাবেস ইনস্ট্যান্স (IDBDatabase অবজেক্ট) থাকে, যা ট্রানজ্যাকশন শুরু এবং অবজেক্ট স্টোরে অ্যাক্সেস করতে ব্যবহৃত হয়।

  • ডেটা যোগ, পাওয়া, আপডেট ও মুছে ফেলার মতো আসল পড়া ও লেখার কাজ db অবজেক্ট ব্যবহার করে সম্পন্ন হয়।

এ সময়ে, ডাটাবেস প্রস্তুত, তাই আপনি নিরাপদে ট্রানজ্যাকশন শুরু করতে পারেন।

ডেটা যুক্ত করা

IndexedDB-তে নতুন ডেটা যোগ করার উপায় এখানে দেখানো হলো।

 1function addUser(db, user) {
 2    const transaction = db.transaction('users', 'readwrite');
 3    const store = transaction.objectStore('users');
 4    const request = store.add(user);
 5
 6    request.onsuccess = () => {
 7        console.log('User added:', user);
 8    };
 9
10    request.onerror = () => {
11        console.error('Add failed:', request.error);
12    };
13}
14
15// Example: Add a user
16request.onsuccess = function (event) {
17    const db = event.target.result;
18    addUser(db, { id: 1, name: 'Alice' });
19    addUser(db, { id: 2, name: 'Bob' });
20    addUser(db, { id: 3, name: 'John' });
21};
  • db.transaction() দিয়ে একটি ট্রানজ্যাকশন তৈরি করুন এবং কোন অবজেক্ট স্টোরে কাজ করবেন এবং কোন মোডে (readwrite) সেটি নির্ধারণ করুন।
  • store.add() পদ্ধতি ব্যবহার করে নতুন ডেটা যোগ করুন।
  • ট্রানজ্যাকশন স্বয়ংক্রিয়ভাবে সম্পন্ন হয়, তবে একাধিক অপারেশন একসাথে করতে চাইলে ট্রানজ্যাকশন সমাপ্তি ইভেন্ট ব্যবহার করে সেটি পরিচালনা করতে পারেন।

ডেটা পাওয়া (প্রাইমারি কী অনুসন্ধান)

প্রাইমারি কী ব্যবহার করে নির্দিষ্ট ডেটা পাওয়ার উপায়।

 1function getUserById(db, id) {
 2    const transaction = db.transaction('users', 'readonly');
 3    const store = transaction.objectStore('users');
 4    const request = store.get(id);
 5
 6    request.onsuccess = () => {
 7        if (request.result) {
 8            console.log('User found:', request.result);
 9        } else {
10            console.log('User not found');
11        }
12    };
13
14    request.onerror = () => {
15        console.error('Error retrieving user:', request.error);
16    };
17}
18
19// Example: Get a user by id
20request.onsuccess = function (event) {
21    const db = event.target.result;
22    getUserById(db, 1);
23};
  • db.transaction() দিয়ে শুধুমাত্র-পাঠযোগ্য ট্রানজ্যাকশন তৈরি করুন।
  • নির্দিষ্ট প্রাইমারি কী এর জন্য store.get(id) ব্যবহার করে ডেটা পান।
  • ডেটা সফলভাবে পাওয়া গেলে onsuccess চালু হয় এবং ফলাফল থাকলে প্রদর্শন করা হয়। ফলাফল না থাকলে, সেটি 'কোনো সংশ্লিষ্ট ডেটা নেই' হিসেবে ধরা হয়।

ইনডেক্স অনুসন্ধান ব্যবহার

প্রাইমারি কী ছাড়া অন্য প্রপার্টি দিয়ে খুঁজতে চাইলে, আগে তৈরি করা ইনডেক্স ব্যবহার করুন।

 1function getUserByName(db, name) {
 2    const transaction = db.transaction('users', 'readonly');
 3    const store = transaction.objectStore('users');
 4    const index = store.index('name');
 5    const request = index.get(name);
 6
 7    request.onsuccess = () => {
 8        if (request.result) {
 9            console.log('User by name:', request.result);
10        } else {
11            console.log('No user found with that name');
12        }
13    };
14
15    request.onerror = () => {
16        console.error('Error retrieving user by name:', request.error);
17    };
18}
19
20// Example: Get a user by id
21request.onsuccess = function (event) {
22    const db = event.target.result;
23    getUserByName(db, 'Alice');
24};
  • store.index('name') ব্যবহার করে আগে তৈরি করা name ইনডেক্সে যান।
  • index.get(value) মিলে যাওয়া মান সহ প্রথম রেকর্ডটি ফেরত দেয়। একাধিক রেকর্ডের মান একই হলে, index.getAll(value) দিয়ে সবগুলো এনে নিতে পারেন।

ডেটা আপডেট করা

বিদ্যমান ডেটা আপডেট (ওভাররাইট) করতে put() পদ্ধতি ব্যবহার করুন।

মিলে যাওয়া প্রাইমারি কী থাকলে, সেটি আপডেট হয়; না থাকলে নতুন রেকর্ড যোগ হয়।

 1function updateUser(db, updatedUser) {
 2    const transaction = db.transaction('users', 'readwrite');
 3    const store = transaction.objectStore('users');
 4    const request = store.put(updatedUser);
 5
 6    request.onsuccess = () => {
 7        console.log('User updated:', updatedUser);
 8    };
 9
10    request.onerror = () => {
11        console.error('Update failed:', request.error);
12    };
13}
14
15// Example: Update user
16request.onsuccess = async (event) => {
17    const db = event.target.result;
18
19    // Test : update existing user
20    updateUser(db, { id: 3, name: 'John Updated' });
21
22    // Test : insert new user
23    updateUser(db, { id: 4, name: 'Charlie' });
24};
  • put() হলো এমন একটি সহজ পদ্ধতি যা আপডেট এবং যোগ—দুইটাই সমর্থন করে।
  • একই প্রাইমারি কী সহ ডেটা আগে থাকলে, সেটি ওভাররাইট হবে।
  • আপডেট করার আগে অস্তিত্ব যাচাই করতে চাইলে, আগে get() ব্যবহার করে নিশ্চিত হোন।

ডেটা মুছে ফেলা

নির্দিষ্ট প্রাইমারি কী অনুযায়ী ডেটা মুছতে delete() পদ্ধতি ব্যবহার করুন।

 1function deleteUser(db, id) {
 2    const transaction = db.transaction('users', 'readwrite');
 3    const store = transaction.objectStore('users');
 4    const request = store.delete(id);
 5
 6    request.onsuccess = () => {
 7        console.log(`User with id=${id} deleted successfully`);
 8    };
 9
10    request.onerror = () => {
11        console.error(`Failed to delete user with id=${id}:`, request.error);
12    };
13}
14
15// Example: Delete a user by id
16request.onsuccess = function (event) {
17    const db = event.target.result;
18    deleteUser(db, 4);
19};
  • মিলে যাওয়া প্রাইমারি কী দিয়ে ডেটা মুছতে store.delete(id) ব্যবহার করুন।
  • মনে রাখবেন, ডেটা না থাকলেও কোনো ত্রুটি হবে না এবং সেটি সফল বলে ধরা হবে।
  • ত্রুটি হ্যান্ডলিং প্রদান করলে কোড আরও শক্তিশালী হবে।

সব ডেটা পাওয়া

getAll()

অবজেক্ট স্টোরের সব রেকর্ড পেতে getAll() পদ্ধতি ব্যবহার করুন।

 1function getAllUsers(db) {
 2    const transaction = db.transaction('users', 'readonly');
 3    const store = transaction.objectStore('users');
 4    const request = store.getAll();
 5
 6    request.onsuccess = () => {
 7        console.log('All users:', request.result);
 8    };
 9
10    request.onerror = () => {
11        console.error('Failed to retrieve users:', request.error);
12    };
13}
14
15// Example: Get all users
16request.onsuccess = function (event) {
17    const db = event.target.result;
18    getAllUsers(db);
19};
  • getAll() নির্দিষ্ট অবজেক্ট স্টোরের সব রেকর্ড অ্যারে আকারে ফেরত দেয়।
  • একসাথে অনেক বেশি ডেটা আনার সময়েও এটি দক্ষতার সঙ্গে কাজ করে।
  • ফলাফলগুলো request.result-এ অ্যারে আকারে থাকে।
  • ব্যর্থতা সামলাতে সবসময় ত্রুটি হ্যান্ডলিং যুক্ত করুন।

openCursor()

openCursor() হল অবজেক্ট স্টোর বা ইনডেক্সের রেকর্ড ক্রমশ পর্যবেক্ষণ করার একটি পদ্ধতি। একসাথে অনেক ডেটা না এনে একেকটি করে প্রক্রিয়া করতে চাইলে এটি উপযোগী।

 1function getAllUsersWithCursor(db) {
 2    const transaction = db.transaction('users', 'readonly');
 3    const store = transaction.objectStore('users');
 4    const request = store.openCursor();
 5
 6    request.onsuccess = () => {
 7        const cursor = request.result;
 8        if (cursor) {
 9            console.log('User:', cursor.value); // Process the current record
10            cursor.continue(); // Move to the next record
11        } else {
12            console.log('All users have been processed.');
13        }
14    };
15
16    request.onerror = () => {
17        console.error('Failed to open cursor:', request.error);
18    };
19}
20
21// Example: Get all users
22request.onsuccess = function (event) {
23    const db = event.target.result;
24    getAllUsersWithCursor(db);
25};
  • openCursor() ব্যবহার করে একেকটি করে রেকর্ড পর্যবেক্ষণ ও সংগ্রহ করতে পারবেন।
  • বর্তমান রেকর্ডের ডেটা অবজেক্ট পাওয়ার জন্য cursor.value ব্যবহার করুন।
  • cursor.continue() দিয়ে কার্সরকে পরবর্তী রেকর্ডে নিয়ে যান।
  • যখন cursor === null, তখন সব রেকর্ড পর্যবেক্ষিত হয়ে গেছে।

openCursor() ব্যবহার করে আপডেট প্রক্রিয়ার একটি উদাহরণ

উদাহরণস্বরূপ, যার নাম 'Alice' সেই ব্যবহারকারীর নাম 'Alicia' তে পরিবর্তন করার প্রক্রিয়াটি নিচের মতো হবে:।

 1function updateUserName(db, oldName, newName) {
 2    const transaction = db.transaction('users', 'readwrite');
 3    const store = transaction.objectStore('users');
 4    const index = store.index('name'); // Use the 'name' index
 5    const request = index.openCursor(IDBKeyRange.only(oldName));
 6
 7    request.onsuccess = () => {
 8        const cursor = request.result;
 9        if (cursor) {
10            const user = cursor.value;
11            user.name = newName; // Update the name
12            const updateRequest = cursor.update(user);
13
14            updateRequest.onsuccess = () => {
15                console.log('Updated user:', user);
16            };
17
18            updateRequest.onerror = () => {
19                console.error('Failed to update user:', updateRequest.error);
20            };
21
22            cursor.continue();
23        } else {
24            console.log('All matching users have been updated.');
25        }
26    };
27
28    request.onerror = () => {
29        console.error('Cursor error:', request.error);
30    };
31}
32
33// Example: Update user name
34request.onsuccess = function (event) {
35    const db = event.target.result;
36    updateUserName(db, 'Alice', 'Alicia');
37};
  • IDBKeyRange.only(oldName) IDBKeyRange.only ব্যবহার করে, আপনি শুধুমাত্র সেই রেকর্ডগুলিকে লক্ষ্য করতে পারেন যাদের কী ঠিক oldName এর সাথে মেলে। আপনি যখন সরাসরি নির্দিষ্ট কোনো মানে প্রবেশ করতে চান তখন এটি উপকারী।

  • cursor.update() cursor.value আপডেট করার পরে, update() ডাকা হলে সংশ্লিষ্ট রেকর্ডটি ওভাররাইট হবে।

  • একাধিক মিলের পরিচালনা cursor.continue() ডাকার মাধ্যমে, আপনি কার্সরটি পরবর্তী মিলিত রেকর্ডে স্থানান্তর করতে পারেন। এটি আপনাকে একই কী বা শর্তের সাথে মিলিত একাধিক রেকর্ড ধারাবাহিকভাবে প্রক্রিয়া করতে সহায়তা করে।

  • ত্রুটি পরিচালনা কোনো প্রক্রিয়া ব্যর্থ হলে onerror এ লগ আউটপুট করার ফলে, কারণ অনুসন্ধান ও সমস্যার সমাধান সহজ হয়।

openCursor() ব্যবহার করে মুছে ফেলার প্রক্রিয়ার একটি উদাহরণ

উদাহরণস্বরূপ, যার নাম Bob এমন সকল ব্যবহারকারীকে মুছে ফেলার প্রক্রিয়াটি নিচের মতো হবে:।

 1function deleteUsersByName(db, targetName) {
 2    const transaction = db.transaction('users', 'readwrite');
 3    const store = transaction.objectStore('users');
 4    const index = store.index('name');
 5    const request = index.openCursor(IDBKeyRange.only(targetName));
 6
 7    request.onsuccess = () => {
 8        const cursor = request.result;
 9        if (cursor) {
10            const deleteRequest = cursor.delete();
11
12            deleteRequest.onsuccess = () => {
13                console.log('Deleted user:', cursor.value);
14            };
15
16            deleteRequest.onerror = () => {
17                console.error('Failed to delete user:', deleteRequest.error);
18            };
19
20            cursor.continue();
21        } else {
22            console.log('All matching users have been deleted.');
23        }
24    };
25
26    request.onerror = () => {
27        console.error('Cursor error:', request.error);
28    };
29}
30
31// Example: Delete user by name
32request.onsuccess = function (event) {
33    const db = event.target.result;
34    deleteUsersByName(db, 'Bob');
35};
  • cursor.delete() cursor.delete() ব্যবহার করলে বর্তমান কার্সর অবস্থানের রেকর্ডটি ডিলিট করা হয়। কারণ ফলাফল অ্যাসিনক্রোনাসভাবে ফেরত আসে, আপনি onsuccess এ প্রক্রিয়াটি পরীক্ষা করতে পারেন।

লেনদেন এবং অ্যাসিনক্রোনাস প্রক্রিয়াকরণ সম্পর্কিত নোট

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

 1function openDatabase() {
 2    return new Promise((resolve, reject) => {
 3        const request = indexedDB.open('MyDatabase', 1);
 4
 5        request.onupgradeneeded = function (event) {
 6            const db = event.target.result;
 7
 8            // Initialization process (creating object stores and indexes, etc.)
 9            const store = db.createObjectStore('users', { keyPath: 'id' });
10            store.createIndex('name', 'name', { unique: false });
11        };
12
13        request.onsuccess = function (event) {
14            const db = event.target.result;
15            resolve(db);
16        };
17
18        request.onerror = function () {
19            reject(request.error);
20        };
21    });
22}
23
24function addUserAsync(db, user) {
25    return new Promise((resolve, reject) => {
26        const transaction = db.transaction('users', 'readwrite');
27        const store = transaction.objectStore('users');
28        const request = store.add(user);
29
30        request.onsuccess = () => resolve();
31        request.onerror = () => reject(request.error);
32    });
33}
34
35async function main() {
36    try {
37        const db = await openDatabase();
38        await addUserAsync(db, { id: 1, name: 'Alice' });
39        console.log('User added successfully');
40    } catch (error) {
41        console.error('Error:', error);
42    }
43}
  • openDatabase বা addUserAsync এর মতো ফাংশনকে Promise দ্বারা র‍্যাপ করলে async/await দিয়ে অ্যাসিনক্রোনাস প্রক্রিয়া সহজে পরিচালনা করা যায়।
  • এতে কলব্যাক হেল এড়ানো যায় এবং কোড আরও পড়া সহজ হয়।

সারসংক্ষেপ

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

বিশেষ করে, নিচের বিষয়গুলো মনে রাখলে আপনি এটি আরও সহজভাবে ব্যবহার করতে পারবেন:।

  • onupgradeneeded দিয়ে প্রাথমিক সেটআপ করুন।
  • লেনদেনের রিড/রাইট মোডের প্রতি লক্ষ্য রাখুন।
  • ইন্ডেক্স ব্যবহার করলে কার্যকরভাবে অনুসন্ধান করা যায়।
  • ডেটা অবজেক্ট হিসেবে সংরক্ষণ করা যায়, তাই এটি JSON-এর সাথে অত্যন্ত সুসংগত।

IndexedDB আয়ত্ত করলে, PWA এবং অফলাইন অ্যাপের জন্য ডাটা ম্যানেজমেন্ট অনেক সহজ হয়ে যায়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video