HTML - IndexedDB: Ваша личная база данных в браузере

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир IndexedDB. Как ваш добрый соседский компьютерный учитель, я здесь, чтобы провести вас через это путешествие, даже если вы никогда не писали ни строчки кода. Так что надевайте виртуальные каски и начнем строительство!

HTML - IndexedDB

Что такое IndexedDB?

IndexedDB - это как迷你-база данных, которая живет прямо в вашем веб-браузере. Представьте себе крошечный файловый ящик внутри вашего компьютера, который может хранить и организовывать различную информацию для ваших веб-приложений. Круто, правда?

Why Use IndexedDB?

Вы можете задаться вопросом: "Зачем нам еще один способ хранения данных?" Давайте расскажу вам небольшую историю. В старые добрые времена мы полагались на куки и локальное хранилище для хранения данных в браузере. Но это было как пытаться впихнуть слона в спичечный коробок - ограниченно и не очень гибко.

Вот почему IndexedDB - это супергерой среди браузерных хранилищ:

Функция	Описание
Емкость хранения	Может хранить намного больше данных, чем куки или локальное хранилище
Типы данных	Поддерживает различные типы данных, включая файлы и blob'ы
Индексация	Позволяет быстро искать ваши данные
Транзакции	Обеспечивает целостность данных с помощью транзакционных операций
Асинхронность	Не冻结ет ваше приложение во время работы с данными

Начало работы с IndexedDB

Давайте закатаем рукава и начнем с реального кода. Не волнуйтесь, если он сначала покажется вам пугающим - мы разберем его шаг за шагом.

let db;
const request = indexedDB.open("MyFirstDatabase", 1);

request.onerror = function(event) {
console.error("Ошибка базы данных: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("База данных успешно открыта");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("Объектное хранилище создано");
};

Ууу! Это много для восприятия, не так ли? Давайте разберем это:

Мы начинаем с объявления переменной db для хранения нашего подключения к базе данных.
Мы используем indexedDB.open() для открытия (или создания) базы данных с именем "MyFirstDatabase".
Мы настраиваем три обработчика событий:

onerror: Запускается, если что-то идет не так.
onsuccess: Запускается, когда база данных успешно открыта.
onupgradeneeded: Запускается, когда база данных создается или обновляется.

Представьте onupgradeneeded как архитектора базы данных. Это место, где мы проектируем структуру нашей базы данных.

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

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

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("Ошибка добавления студента: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Студент успешно добавлен");
};
}

// Использование
addStudent({ id: 1, name: "Алиса", grade: "A" });
addStudent({ id: 2, name: "Боб", grade: "B" });

Вот что происходит:

Мы создаем транзакцию - представьте это как безопасный тоннель для наших данных.
Мы получаем объектное хранилище (как таблицу в традиционной базе данных).
Мы используем add() для вставки наших данных о студенте.
Мы настраиваем обработчики успеха и ошибки, чтобы знать, сработало ли это.

Получение данных из IndexedDB

Какой смысл в хранении данных, если мы не можем их получить? Давайте извлечем наши данные о студенте:

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Ошибка получения студента: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("Студент найден:", request.result);
} else {
console.log("Студент не найден");
}
};
}

// Использование
getStudent(1);

Эта функция похожа на библиотекаря, который достает книгу для вас:

Мы начинаем read-only транзакцию (мы ничего не меняем).
Мы используем get() для извлечения студента по их ID.
Если мы находим студента, мы логируем их детали; если нет, мы говорим, что их не нашли.

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

Студенты progresses, оценки изменяются. Давайте обновим наши записи:

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Ошибка получения студента для обновления: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("Ошибка обновления студента: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("Студент успешно обновлен");
};
};
}

// Использование
updateStudent(1, "A+");

Эта функция похожа на учителя, который обновляет ведомость оценок:

Мы извлекаем текущие данные студента.
Мы изменяем оценку.
Мы используем put() для сохранения обновленных данных обратно в базу данных.

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

Иногда нам нужно удалить данные. Давайте добавим функцию для удаления студента:

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("Ошибка удаления студента: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Студент успешно удален");
};
}

// Использование
deleteStudent(2);

Это как стирание записи из наших студенческих файлов:

Мы начинаем "readwrite" транзакцию, так как мы изменяем данные.
Мы используем метод delete() для удаления студента по их ID.
Мы обрабатываем случаи успеха и ошибки, чтобы знать, сработало ли это.

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир IndexedDB. Мы рассмотрели создание базы данных, добавление, получение, обновление и удаление данных. Это основные операции, которые вы будете использовать при работе с IndexedDB.

Remember, practice makes perfect. Попробуйте создать свои небольшие проекты с использованием IndexedDB. Может быть, приложение для списка дел или личный дневник. Чем больше вы будете играть с ним, тем комфортнее вам станет.

IndexedDB может показаться сложным в начале, но это мощный инструмент, который может поднять ваши веб-приложения на новый уровень. Это как супер ability - способность хранить и управлять большими объемами данных прямо в браузере.

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

Credits: Image by storyset