Используйте
localForage - это специальный драйвер для облегчения работы
со встроенными браузерными базами данных. Локальные БД хороши, но у них сложный синтаксис, плюс все эти версии могут легко запутать новичка.
В отличии от localStorage, используя
localForage можно хранить практически неограниченное количество данных. При этом объекты, массивы, блобы и даже файлы можно скармливать напрямую, localForage их потом выдаст в том же виде в каком вы ему скормили - имеется в виду тип данных, ну там Object, String, Blob, File и так далее.
Сравните два кода выполняющих одно и то же:
Код IndexedDB:
spoiler// IndexedDB.
var db;
var dbName = "dataspace";
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// Обработка ошибок.
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("fullName", "fullName", { unique: false });
objectStore.transaction.oncomplete = function(event) {
var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
}
};
// После того, как БД создана, добавим туда запись о пользователе
var transaction = db.transaction(["users"], "readwrite");
// Как-то отреагируем на окончание процесса записи в базу
transaction.oncomplete = function(event) {
console.log("All done!");
};
transaction.onerror = function(event) {
// Не забываем обрабатывать ошибки
};
var objectStore = transaction.objectStore("users");
for (var i in users) {
var request = objectStore.add(users[i]);
request.onsuccess = function(event) {
// Выведем в консоль информацию о каждом добавленном пользователе
console.log(event.target.result);
};
}
Код localForage:
spoiler// Сохраняем информацию о пользователях
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
localForage.setItem('users', users, function(result) {
console.log(result);
});
Синтаксис localForage отдаленно похож на localStorage, с той лишь разницей, что localForage работает асинхронно и не тормозит основной поток. Для работы с localForage можно использовать колбеки, промисы или async / await. Подробная информация с примерами доступна на
гитхабе.