نحوه استفاده از IndexedDB به عنوان پایگاه داده

بسیاری از برنامه های وب نیاز به استفاده از پایگاه داده برای ذخیره جزئیات یا تنظیمات برگزیده کاربر دارند.  نحوه استفاده از IndexedDB به عنوان پایگاه داده را در ادامه یاد بگیرید.

IndexedDB یک پایگاه داده NoSQL سمت کلاینت است که به شما امکان می دهد داده های ساختاریافته را در مرورگر وب کاربر ذخیره و بازیابی کنید.

IndexedDB چندین مزیت مانند حافظه بزرگتر و ذخیره سازی و بازیابی اطلاعات آفلاین را نسبت به سایر گزینه های ذخیره سازی مانند localStorage فراهم می کند. در اینجا یاد خواهید گرفت که چگونه از IndexedDB به عنوان پایگاه داده استفاده کنید.

راه اندازی پایگاه داده خود

برای ایجاد پایگاه داده، باید با استفاده از روش باز IndexedDB یک درخواست باز ایجاد کنید. متد open یک شی IDBOpenDBRequest را برمی گرداند. این شیء دسترسی به موفقیت، خطا، و رویدادهای ارتقا یافته منتشر شده از عملیات باز را فراهم می کند.

روش باز دو آرگومان دارد: نام و شماره نسخه اختیاری. آرگومان name نشان دهنده نام پایگاه داده شما است. شماره نسخه، نسخه ای از پایگاه داده را مشخص می کند که برنامه شما انتظار دارد با آن کار کند. مقدار پیش فرض صفر است.

در اینجا نحوه ایجاد یک درخواست باز آمده است:

const openRequest = indexedDB.open("usersdb", 1);

پس از ایجاد درخواست باز، باید به رویدادهای موجود در شی برگشتی گوش داده و مدیریت کنید.

رویداد موفقیت زمانی رخ می دهد که پایگاه داده را با موفقیت ایجاد کنید. پس از انتشار، از طریق event.target.result به شی پایگاه داده خود دسترسی خواهید داشت:

openRequest.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database created", db);
};

مثال بالا یک رویداد موفقیت آمیز را با ثبت شی پایگاه داده کنترل می کند.

اگر IndexedDB هنگام ایجاد پایگاه داده با مشکل مواجه شود، رویداد خطا رخ می دهد. می‌توانید با ثبت خطا در کنسول یا استفاده از روش‌های دیگر رسیدگی به خطا، آن را مدیریت کنید:

openRequest.onerror = function (event) {
  // …
};

رویداد ارتقا یافته زمانی رخ می دهد که پایگاه داده را برای اولین بار ایجاد می کنید یا نسخه آن را به روز می کنید. فقط یک بار انجام می شود، و آن را به مکانی ایده آل برای ایجاد یک انبار اشیاء تبدیل می کند.

ایجاد یک فروشگاه اشیاء

یک ذخیره شی شبیه به یک جدول در پایگاه داده های رابطه ای سمت سرور است. می توانید از یک شی ذخیره برای ذخیره جفت های کلید-مقدار استفاده کنید.

شما باید در پاسخ به رویداد ارتقا یافته، فروشگاه های شی ایجاد کنید. این رویداد زمانی فعال می شود که نسخه جدیدی از پایگاه داده را ایجاد می کنید یا نسخه موجود را ارتقا می دهید. این اطمینان حاصل می کند که پایگاه داده قبل از اضافه کردن هر گونه داده به درستی و به روز پیکربندی شده است.

می توانید با استفاده از متد createObjectStore یک شی ذخیره سازی ایجاد کنید، که می توانید در مرجع پایگاه داده خود به آن دسترسی داشته باشید. این متد نام ذخیره شی و یک شی پیکربندی را به عنوان آرگومان می گیرد.

در شیء پیکربندی، باید یک کلید اصلی تعریف کنید. شما می توانید یک کلید اصلی را با تعریف یک مسیر کلید تعریف کنید، که یک ویژگی است که همیشه وجود دارد و حاوی یک مقدار منحصر به فرد است. همچنین، می‌توانید با تنظیم ویژگی keyPath روی «id» و ویژگی autoIncrement روی true در شیء پیکربندی خود، از یک مولد کلید استفاده کنید.

مثلا:

openRequest.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store
  const userObjectStore = db.createObjectStore("userStore", {
    keyPath: "id",
    autoIncrement: true,
  });
}

این مثال یک شی ذخیره به نام “userStore” در پایگاه داده شما ایجاد می کند و کلید اصلی آن را روی یک شناسه افزایش خودکار تنظیم می کند.

تعریف شاخص ها

در IndexedDB، ایندکس راهی برای سازماندهی و بازیابی داده ها به طور کارآمدتر است. این به شما این امکان را می‌دهد که در ذخیره‌سازی شی جستجو کنید و آن را بر اساس ویژگی‌های فهرست‌شده مرتب کنید.

برای تعریف ایندکس روی یک شی ذخیره، از متد createIndex() یک شی ذخیره شی استفاده کنید. این متد یک نام شاخص، یک نام ویژگی و یک شیء پیکربندی را به عنوان آرگومان می گیرد:

userObjectStore.createIndex("name", "name", { unique: false });
userObjectStore.createIndex("email", "email", { unique: true });

این بلوک کد بالا دو شاخص “name” و “email” را در userObjectStore تعریف می کند. نمایه “name” غیر منحصر به فرد است، به این معنی که چندین شیء می توانند مقدار نام یکسانی داشته باشند، در حالی که نمایه “ایمیل” منحصر به فرد است و تضمین می کند که هیچ دو شی نمی توانند مقدار ایمیل یکسانی داشته باشند.

در اینجا یک مثال کامل از نحوه مدیریت یک رویداد ارتقا یافته آورده شده است:

openRequest.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store
  const userObjectStore = db.createObjectStore("userStore", {
    keyPath: "id",
    autoIncrement: true,
  }); 

  // Create indexes
  userObjectStore.createIndex("name", "name", { unique: false });
  userObjectStore.createIndex("email", "email", { unique: true });
};

افزودن داده به IndexedDB

تراکنش در IndexedDB راهی برای گروه بندی چندین عملیات خواندن و نوشتن در یک عملیات واحد است. برای اطمینان از سازگاری و یکپارچگی داده ها، اگر یکی از عملیات در یک تراکنش با شکست مواجه شود، IndexedDB همه عملیات را به عقب برمی گرداند.

const addUserData = (userData, db) => {
  // Open a transaction
  const transaction = db.transaction("userStore", "readwrite");

  // Add data to the object store
  const userObjectStore = transaction.objectStore("userStore");

  // Make a request to add userData
  const request = userObjectStore.add(userData);

  // Handle a success event
  request.onsuccess = function (event) {
    //...
  };

  // Handle an error
  request.onerror = function (event) {
    //...
  };
};

برای افزودن داده‌ها به پایگاه داده IndexedDB، باید یک تراکنش در شی ذخیره‌سازی ایجاد کنید که می‌خواهید داده‌ها را اضافه کنید و سپس از متد add() روی تراکنش برای اضافه کردن داده‌ها استفاده کنید.

شما می توانید با فراخوانی روش تراکنش در شی پایگاه داده خود، یک تراکنش ایجاد کنید. این روش دو آرگومان می گیرد: نام(های) ذخیره داده شما و حالت تراکنش، که می تواند فقط خواندنی (پیش فرض) یا خواندنی باشد.

سپس، متد ()objectStore را در تراکنش فراخوانی کنید و نام شی ذخیره‌سازی را که می‌خواهید به آن داده اضافه کنید، ارسال کنید. این متد یک مرجع را به شی ذخیره می کند.

در نهایت، متد add() را در شی ذخیره کنید و داده‌هایی را که می‌خواهید اضافه کنید ارسال کنید:

این تابع یک تراکنش با ذخیره شی “userStore” ایجاد می کند و حالت را روی “خواندن نوشتن” تنظیم می کند. سپس، شی استور را دریافت کرده و userData را با استفاده از متد add به آن اضافه می کند.

بازیابی داده ها از IndexedDB

برای بازیابی داده ها از پایگاه داده IndexedDB، باید یک تراکنش بر روی شی ذخیره سازی ایجاد کنید که می خواهید داده ها را از آن بازیابی کنید و سپس از متد get() یا getAll() در تراکنش برای بازیابی داده ها بسته به مقدار داده شما باید یک تراکنش در شی ذخیره سازی ایجاد کنید که می خواهید داده ها را از آن بازیابی کنید و سپس از متد get() یا getAll() در تراکنش برای بازیابی داده ها بسته به مقدار داده ای که می خواهید بازیابی کنید استفاده کنید.

متد get() مقداری را برای کلید اصلی شی ای که می خواهید بازیابی کنید می گیرد و شی را با کلید مربوطه از شی ذخیره می کند.

متد getAll() تمام داده های موجود در یک شی ذخیره را برمی گرداند. همچنین یک محدودیت اختیاری را به عنوان آرگومان در نظر می گیرد و تمام داده های منطبق را از فروشگاه برمی گرداند.

const getUserData = (id, db) => {
  const transaction = db.transaction(“userStore”, “readonly”);
  const userObjectStore = transaction.objectStore(“userStore”);

  // Make a request to get the data
  const request = userObjectStore.get(id);

  request.onsuccess = function (event) {
    console.log(request.result);
  };

  request.onerror = function (event) {
    // Handle error
  };
};

این تابع یک تراکنش با شی ذخیره “userStore” ایجاد می کند و حالت را روی “readonly” تنظیم می کند. سپس داده های کاربر را با شناسه منطبق از شی ذخیره می کند.

به روز رسانی داده ها با IndexedDB

برای به‌روزرسانی داده‌ها در IndexedDB، باید یک تراکنش با حالت «readwrite» ایجاد کنید. با بازیابی شی مورد نظر برای به روز رسانی با استفاده از متد get() ادامه دهید. سپس شی را تغییر دهید و متد put() را در فروشگاه شیء فراخوانی کنید تا شیء به روز شده در پایگاه داده ذخیره شود.

const updateUserData = (id, userData, db) => {
  const transaction = db.transaction("userStore", "readwrite");
  const userObjectStore = transaction.objectStore("userStore");

  // Make a request to get the data
  const getRequest = userObjectStore.get(id);

  // Handle a success event
  getRequest.onsuccess = function (event) {
    // Get the old user data
    const user = event.target.result;

    // Update the user data
    user.name = userData.name;
    user.email = userData.email;

    // Make a request to update the data
    const putRequest = userObjectStore.put(user);

    putRequest.onsuccess = function (event) {
      // Handle success
    };

    putRequest.onerror = function (event) {
      // Handle error
    };
  };

  getRequest.onerror = function (event) {
    // Handle error
  };
};

این تابع یک تراکنش برای دریافت و به روز رسانی داده های پایگاه داده شما ایجاد می کند.

حذف داده ها از IndexedDB

برای حذف داده ها از IndexedDB، باید یک تراکنش با حالت «خواندن» ایجاد کنید. سپس متد delete() را در فروشگاه شیء فراخوانی کنید تا شی از پایگاه داده حذف شود:

const deleteUserData = (id, db) => {
  const transaction = db.transaction(“userStore”, “readwrite”);
  const userObjectStore = transaction.objectStore(“userStore”);

  // Make a request to delete the data
  const request = userObjectStore.delete(id);

  request.onsuccess = function (event) {
    // Handle success
  };

  request.onerror = function (event) {
    // Handle error
  };
};

این تابع یک تراکنش ایجاد می کند که داده ها را با شناسه مربوطه از ذخیره شی شما حذف می کند.

آیا باید از IndexedDB یا localStorage استفاده کنید؟

انتخاب بین IndexedDB و سایر پایگاه های داده سمت سرویس گیرنده، مانند localStorage، به نیازهای برنامه شما بستگی دارد. از localStorage برای ذخیره سازی ساده مقادیر کم داده استفاده کنید. IndexedDB را برای مجموعه داده های ساختار یافته بزرگی که نیاز به پرس و جو و فیلتر دارند، انتخاب کنید.