Как использовать IndexedDB для хранения данных на клиенте

IndexedDB является веб-технологией, которая позволяет хранить данные на клиентском устройстве. Она предоставляет возможность создавать хранилища данных, индексы и транзакции, обеспечивая гибкую и производительную систему хранения данных на стороне клиента. В этой статье мы рассмотрим основные шаги для работы с IndexedDB. 😊

Создание и открытие базы данных

Для начала работы с IndexedDB необходимо открыть базу данных или создать новую. Используйте метод indexedDB.open(), указав имя базы данных и, при необходимости, версию.

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

Обработайте события onupgradeneeded и onsuccess, чтобы создать хранилище данных и установить соединение с базой данных.

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

  if (!db.objectStoreNames.contains("myData")) {
    db.createObjectStore("myData", { keyPath: "id" });
  }
};

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

Работа с данными

После того, как база данных открыта, можно добавлять, обновлять, читать и удалять данные.

Добавление данных

Для добавления данных создайте транзакцию и используйте метод add().

const data = { id: 1, name: "John Doe" };

const transaction = db.transaction(["myData"], "readwrite");
const objectStore = transaction.objectStore("myData");

const addRequest = objectStore.add(data);

addRequest.onsuccess = function(event) {
  console.log("Data added:", data);
};

Чтение данных

Чтение данных осуществляется с помощью метода get().

const getRequest = objectStore.get(1);

getRequest.onsuccess = function(event) {
  console.log("Data read:", event.target.result);
};

Обновление данных

Обновление данных происходит аналогично добавлению, но с использованием метода put().

const updatedData = { id: 1, name: "Jane Doe" };

const updateRequest = objectStore.put(updatedData);

updateRequest.onsuccess = function(event) {
  console.log("Data updated:", updatedData);
};

Удаление данных

Для удаления данных используйте метод delete().

const deleteRequest = objectStore.delete(1);

deleteRequest.onsuccess = function(event) {
  console.log("Data deleted");
};

Закрытие базы данных

После завершения работы с IndexedDB не забывайте закрывать соединение с базой данных с помощью метода close().

db.close();
console.log("Database closed");

Теперь вы знаете основы работы с IndexedDB для хранения данных на клиенте. 🎉 Продолжайте изучение этой технологии, чтобы создавать более сложные и производительные веб-приложения.