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 для хранения данных на клиенте. 🎉 Продолжайте изучение этой технологии, чтобы создавать более сложные и производительные веб-приложения.
Добавить комментарий