View
156
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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 кроссбраузерность
● Сохранение и работа с большими объемами структурированных данных
● Поддержка разных типов ● Большая скорость ● Возможность кеширования
больших объемов данных (работа как веб приложение)
● Транзакционность, асинхронность
Базы данных. Сейчас и завтра