2. ● Виды сохранения данных на стороне клиента
● Базы данных на клиенте, что это такое?
● WebSQL (синтаксис, примеры кода)
● IndexedDB (примеры кода)
● Вопросы кроссбраузерности баз данных
● Применение WebSQL и IndexedDB в
современных веб-проектах
План
10. Куки
Ограниченность кол-ва на 1 домен и общего
числа, размер кук (4кБ), ограниченное API
Local Storage
Работет синхронно и блокирует браузер
Базы данных
● Поддержка работы с сложными структурно и
большими объемами данных
● Работают как синхронно так и асинхронно
● Поддерживают транзакции
Отличия хранилищ
12. Позитивные стороны:
● Поддерживается SQL синтаксис - удобство в
разработке. Основана на SQLite технологии
● Транзакционность
Негативные стороны:
● Не поддерживаются всеми браузерами (Safari,
Opera, Chrome, Android Browser, IE и FF)
● Не поддерживается её развитие командой W3C
Working Group
Web SQL Database
20. Извлечение данных из таблицы
db.transaction(function(tx){
tx.executeSql('SELECT * FROM tweets
WHERE date>("%s", "now", "-5 minutes")', [],
function(tx, results){
for (var i=0; i<results.rows.length; i++){
span.textContent = results.rows.item(i).tweet;}
}
)};);
WebSQL
21. Позитивные стороны:
● По скорости быстрее чем WebSQL
● Есть API как для синхронной так и для
асинхронной работы
● Транзакционность
Негативные стороны:
● Неудобный интерфейс (не поддерживает SQL)
● Нет удобств которые есть в SQL - сортировка,
полнотекстовый поиск
● Не поддерживаются всеми браузерами (FireFox,
Chrome, IE-10, Opera и Safari)
IndexedDB
23. Создание индексированной базы
данных
var request = window.indexedDB.open("Books");
request.onsuccess = function(event){
db = event.target.result;
// обработка контроля версий
// создание нового хранилища объектов
};
request.onerror = function(event){
console.log('Ошибка инициализации базы данных');
};
IndexedDB
24. Создание хранилища объектов
var store = db.createObjectStore('classic', {
keyPath: 'title',
autoIncrement: false
});
// хранилище объектов готово
IndexedDB
25. Добавление(add) и помещение
(put) объектов в хранилище
var book = {
title: "Название",
author: "Автор",
raiting: 10,
date: (new Date).getTime();
}
READ_WRITE = IDBTransaction.READ_WRITE
IndexedDB
26. Добавление(add) и обновление
(put) объектов в хранилище
var transaction = db.transaction(['classic'], READ_WRITE),
store = transaction.objectStore('classic'),
request = store.put(book);
IndexedDB
27. Извлечение объектов (get)
var transaction = db.transaction(['classic'], READ_WRITE),
store = transaction.objectStore('classic'),
request = store.get(key);
IndexedDB
28. ● Вопросы кроссбраузерности баз данных
● Применение WebSQL и IndexedDB в современных
веб-проектах
Общие моменты БД
31. ● Сохранение и работа с
большими объемами
структурированных данных
● Поддержка разных типов
● Большая скорость
● Возможность кеширования
больших объемов данных
(работа как веб приложение)
● Транзакционность, асинхронность
Базы данных. Сейчас и завтра