Databases on client side tips and tricks

Lemekha Denys Web Developer

● Виды сохранения данных на стороне клиента● Базы данных на клиенте, что это такое? ● WebSQL (синтаксис, примеры кода)● IndexedDB (примеры кода)● Вопросы кроссбраузерности баз данных● Применение WebSQL и IndexedDB в

современных веб-проектах

План

Куки

WebStorage (Local Storage)

Базы данных

Виды сохранения данных на стороне клиента

Данные

Куки

Куки

Local Storage

Базы данных

КукиОграниченность кол-ва на 1 домен и общего

числа, размер кук (4кБ), ограниченное APILocal Storage

Работет синхронно и блокирует браузерБазы данных

● Поддержка работы с сложными структурно и большими объемами данных

● Работают как синхронно так и асинхронно ● Поддерживают транзакции

Отличия хранилищ

WebSQL & IndexedDB

Виды клиентских БД

Позитивные стороны:● Поддерживается SQL синтаксис - удобство в

разработке. Основана на SQLite технологии● Транзакционность

Негативные стороны:● Не поддерживаются всеми браузерами (Safari,

Opera, Chrome, Android Browser, IE и FF)● Не поддерживается её развитие командой W3C

Working Group

Web SQL Database

Проверка, поддерживает ли браузер WebSQL

if (window.openDatabase){ //..операции с базой данных}

WebSQL

Создание Базы данных

db = openDatabase('mydb','1.0','Комментарий к базе данных', 2*1024*1024);

WebSQL

Создание таблиц

db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS tweets (id INTEGER PRIMARY KEY, date, tweet ) ');});

WebSQL

Создание таблиц

db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS tweets (id INTEGER PRIMARY KEY, date, tweet ) ',[],callback_success, callback_error);});

WebSQL

WebSQL

Добавление данных в таблицу

db.transaction(function(tx){ tx.executeSql('INSERT INTO tweets (date, tweet) VALUES (?,?)', [(new Date), 'Первое сообщение']) }, callback_error_function );

WebSQL

WebSQL

Извлечение данных из таблицы

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

Позитивные стороны:● По скорости быстрее чем WebSQL● Есть API как для синхронной так и для

асинхронной работы ● Транзакционность

Негативные стороны:● Неудобный интерфейс (не поддерживает SQL)● Нет удобств которые есть в SQL - сортировка,

полнотекстовый поиск ● Не поддерживаются всеми браузерами (FireFox,

Chrome, IE-10, Opera и Safari)

IndexedDB

Инициализация window.IndexedDB Object

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

IndexedDB

Создание индексированной базы данных

var request = window.indexedDB.open("Books"); request.onsuccess = function(event){

db = event.target.result; // обработка контроля версий // создание нового хранилища объектов }; request.onerror = function(event){ console.log('Ошибка инициализации базы данных'); };

IndexedDB

Создание хранилища объектов

var store = db.createObjectStore('classic', { keyPath: 'title', autoIncrement: false }); // хранилище объектов готово

IndexedDB

Добавление(add) и помещение(put) объектов в хранилище

var book = { title: "Название", author: "Автор", raiting: 10, date: (new Date).getTime(); } READ_WRITE = IDBTransaction.READ_WRITE

IndexedDB

Добавление(add) и обновление(put) объектов в хранилище

var transaction = db.transaction(['classic'], READ_WRITE), store = transaction.objectStore('classic'), request = store.put(book);

IndexedDB

Извлечение объектов (get)

var transaction = db.transaction(['classic'], READ_WRITE), store = transaction.objectStore('classic'), request = store.get(key);

IndexedDB

● Вопросы кроссбраузерности баз данных

● Применение WebSQL и IndexedDB в современных веб-проектах

Общие моменты БД

WebSQL кроссбраузерность

IndexedDB кроссбраузерность

● Сохранение и работа с большими объемами структурированных данных

● Поддержка разных типов ● Большая скорость ● Возможность кеширования

больших объемов данных (работа как веб приложение)

● Транзакционность, асинхронность

Базы данных. Сейчас и завтра