Storages

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

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

// Открываем базу данных
const openDatabase = indexedDB.open('myDatabase', 1);
 
// Создаем хранилище объектов
openDatabase.onupgradeneeded = function() {
const db = this.result;
const store = db.createObjectStore('bookmarks', { keyPath: 'id'});
store.createIndex('title', 'title', { unique: false });
}
 
// Добавляем ссылку на сайт в базу данных
function addBookmark(title, url) {
const db = openDatabase.result;
const transaction = db.transaction(['bookmarks'], 'readwrite');
const store = transaction.objectStore('bookmarks');
 
const bookmark = {
title: title,
url: url,
id: url.hashCode()
};
 
store.put(bookmark);
}
 
String.prototype.hashCode = function() {
  let hash = 0, i, chr;
  for (i = 0; i < this.length; i++) {
    chr = this.charCodeAt(i);
    hash = ((hash << 5) - hash) + chr;
    hash |= 0; 
  }
  return hash;
};
 
// Получаем все ссылки на сайты из базы данных
function getBookmarks() {
  const db = openDatabase.result;
  const transaction = db.transaction(['bookmarks'], 'readonly');
  const store = transaction.objectStore('bookmarks');
 
  const request = store.getAll();
 
  request.onsuccess = function() {
    // Отображаем ссылки на сайты в списке
    const bookmarks = this.result;
    // ...
  }
}
 
// Удаляем ссылку на сайт из базы данных
function removeBookmark(id) {
  const db = openDatabase.result;
  const transaction = db.transaction(['bookmarks'], 'readwrite');
  const store = transaction.objectStore('bookmarks');
 
  store.delete(id);
}

WebSQL был одним из первых типов локальных баз данных, который поддерживался в Google Chrome. В нем используется язык SQL для выполнения запросов к базе данных. Тип данных WebSQL очень похож на SQLite и имеет ту же производительность.

Хотя WebSQL и прекратили поддерживать, но он все еще работает во многих Chrome extensions. Кроме того, он все еще поддерживается в других браузерах, таких как Safari и Opera.

localStorage — это наиболее простая и удобная локальная база данных, которая легко доступна и понятна для новичков в программировании. Однако он не обладает такой же производительностью, как другие типы локальных баз данных.

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