Databases on Client Side
-
Upload
ecommerce-solution-provider-sysiq -
Category
Documents
-
view
156 -
download
1
description
Transcript of Databases on Client Side
![Page 1: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/1.jpg)
Databases on client side tips and tricks
Lemekha Denys Web Developer
![Page 2: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/2.jpg)
● Виды сохранения данных на стороне клиента● Базы данных на клиенте, что это такое? ● WebSQL (синтаксис, примеры кода)● IndexedDB (примеры кода)● Вопросы кроссбраузерности баз данных● Применение WebSQL и IndexedDB в
современных веб-проектах
План
![Page 3: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/3.jpg)
Куки
WebStorage (Local Storage)
Базы данных
Виды сохранения данных на стороне клиента
![Page 4: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/4.jpg)
Данные
![Page 5: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/5.jpg)
Куки
![Page 6: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/6.jpg)
Куки
![Page 7: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/7.jpg)
![Page 8: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/8.jpg)
Local Storage
![Page 9: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/9.jpg)
Базы данных
![Page 10: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/10.jpg)
КукиОграниченность кол-ва на 1 домен и общего
числа, размер кук (4кБ), ограниченное APILocal Storage
Работет синхронно и блокирует браузерБазы данных
● Поддержка работы с сложными структурно и большими объемами данных
● Работают как синхронно так и асинхронно ● Поддерживают транзакции
Отличия хранилищ
![Page 11: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/11.jpg)
WebSQL & IndexedDB
Виды клиентских БД
![Page 12: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/12.jpg)
Позитивные стороны:● Поддерживается SQL синтаксис - удобство в
разработке. Основана на SQLite технологии● Транзакционность
Негативные стороны:● Не поддерживаются всеми браузерами (Safari,
Opera, Chrome, Android Browser, IE и FF)● Не поддерживается её развитие командой W3C
Working Group
Web SQL Database
![Page 13: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/13.jpg)
Проверка, поддерживает ли браузер WebSQL
if (window.openDatabase){ //..операции с базой данных}
WebSQL
![Page 14: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/14.jpg)
Создание Базы данных
db = openDatabase('mydb','1.0','Комментарий к базе данных', 2*1024*1024);
WebSQL
![Page 15: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/15.jpg)
Создание таблиц
db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS tweets (id INTEGER PRIMARY KEY, date, tweet ) ');});
WebSQL
![Page 16: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/16.jpg)
Создание таблиц
db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS tweets (id INTEGER PRIMARY KEY, date, tweet ) ',[],callback_success, callback_error);});
WebSQL
![Page 17: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/17.jpg)
WebSQL
![Page 18: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/18.jpg)
Добавление данных в таблицу
db.transaction(function(tx){ tx.executeSql('INSERT INTO tweets (date, tweet) VALUES (?,?)', [(new Date), 'Первое сообщение']) }, callback_error_function );
WebSQL
![Page 19: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/19.jpg)
WebSQL
![Page 20: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/20.jpg)
Извлечение данных из таблицы
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
![Page 21: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/21.jpg)
Позитивные стороны:● По скорости быстрее чем WebSQL● Есть API как для синхронной так и для
асинхронной работы ● Транзакционность
Негативные стороны:● Неудобный интерфейс (не поддерживает SQL)● Нет удобств которые есть в SQL - сортировка,
полнотекстовый поиск ● Не поддерживаются всеми браузерами (FireFox,
Chrome, IE-10, Opera и Safari)
IndexedDB
![Page 22: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/22.jpg)
Инициализация window.IndexedDB Object
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
IndexedDB
![Page 23: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/23.jpg)
Создание индексированной базы данных
var request = window.indexedDB.open("Books"); request.onsuccess = function(event){
db = event.target.result; // обработка контроля версий // создание нового хранилища объектов }; request.onerror = function(event){ console.log('Ошибка инициализации базы данных'); };
IndexedDB
![Page 24: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/24.jpg)
Создание хранилища объектов
var store = db.createObjectStore('classic', { keyPath: 'title', autoIncrement: false }); // хранилище объектов готово
IndexedDB
![Page 25: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/25.jpg)
Добавление(add) и помещение(put) объектов в хранилище
var book = { title: "Название", author: "Автор", raiting: 10, date: (new Date).getTime(); } READ_WRITE = IDBTransaction.READ_WRITE
IndexedDB
![Page 26: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/26.jpg)
Добавление(add) и обновление(put) объектов в хранилище
var transaction = db.transaction(['classic'], READ_WRITE), store = transaction.objectStore('classic'), request = store.put(book);
IndexedDB
![Page 27: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/27.jpg)
Извлечение объектов (get)
var transaction = db.transaction(['classic'], READ_WRITE), store = transaction.objectStore('classic'), request = store.get(key);
IndexedDB
![Page 28: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/28.jpg)
● Вопросы кроссбраузерности баз данных
● Применение WebSQL и IndexedDB в современных веб-проектах
Общие моменты БД
![Page 29: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/29.jpg)
WebSQL кроссбраузерность
![Page 30: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/30.jpg)
IndexedDB кроссбраузерность
![Page 31: Databases on Client Side](https://reader034.fdocument.pub/reader034/viewer/2022051612/54c4a75e4a795991118b45b9/html5/thumbnails/31.jpg)
● Сохранение и работа с большими объемами структурированных данных
● Поддержка разных типов ● Большая скорость ● Возможность кеширования
больших объемов данных (работа как веб приложение)
● Транзакционность, асинхронность
Базы данных. Сейчас и завтра