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

1. IndexedDB:
   IndexedDB — это мощный API базы данных браузера, который позволяет разработчикам хранить и извлекать структурированные данные. Вот пример создания базы данных IndexedDB и добавления в нее данных:

// Open or create a database
let request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // Create an object store
  let objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

  // Create an index
  objectStore.createIndex('name', 'name', { unique: false });

  // Add data
  objectStore.add({ id: 1, name: 'John Doe', age: 30 });
};
request.onsuccess = function(event) {
  let db = event.target.result;

  // Perform database operations...
};

2. Веб-хранилище (localStorage и sessionStorage):
   Веб-хранилище предоставляет более простой механизм хранения значений ключей. Он включает в себя два объекта: localStorage и sessionStorage. Вот пример использования localStorage:

// Storing data in localStorage
localStorage.setItem('name', 'John Doe');
localStorage.setItem('age', '30');
// Retrieving data from localStorage
let name = localStorage.getItem('name');
let age = localStorage.getItem('age');

3. WebSQL (устарело):
   WebSQL — это SQL-подобный API базы данных, который устарел, но все еще поддерживается некоторыми браузерами. Вот пример создания базы данных WebSQL и выполнения запроса:

// Open or create a WebSQL database
let db = openDatabase('myDatabase', '1.0', 'My Database', 2 * 1024 * 1024);
// Execute a query
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS myTable (id INTEGER PRIMARY KEY, name TEXT)');
  tx.executeSql('INSERT INTO myTable (name) VALUES (?)', ['John Doe']);
});

Базы данных браузера предоставляют разработчикам мощные инструменты для хранения данных и доступа к ним локально на стороне клиента. В этой статье мы рассмотрели три метода: IndexedDB, веб-хранилище и WebSQL (устарело). Каждый метод имеет свои сильные стороны и варианты использования, поэтому важно выбрать подходящий, исходя из требований вашего проекта. Включение баз данных браузера в ваши веб-приложения может значительно расширить их функциональность и улучшить взаимодействие с пользователем.