Databases on Client Side

362 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
362
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Databases on Client Side

  1. 1. Databases on client sidetips and tricksLemekha DenysWeb Developer
  2. 2. ● Виды сохранения данных на стороне клиента● Базы данных на клиенте, что это такое?● WebSQL (синтаксис, примеры кода)● IndexedDB (примеры кода)● Вопросы кроссбраузерности баз данных● Применение WebSQL и IndexedDB всовременных веб-проектахПлан
  3. 3. КукиWebStorage (Local Storage)Базы данныхВиды сохранения данныхна стороне клиента
  4. 4. Данные
  5. 5. Куки
  6. 6. Куки
  7. 7. Local Storage
  8. 8. Базы данных
  9. 9. КукиОграниченность кол-ва на 1 домен и общегочисла, размер кук (4кБ), ограниченное APILocal StorageРаботет синхронно и блокирует браузерБазы данных● Поддержка работы с сложными структурно ибольшими объемами данных● Работают как синхронно так и асинхронно● Поддерживают транзакцииОтличия хранилищ
  10. 10. WebSQL & IndexedDBВиды клиентских БД
  11. 11. Позитивные стороны:● Поддерживается SQL синтаксис - удобство вразработке. Основана на SQLite технологии● ТранзакционностьНегативные стороны:● Не поддерживаются всеми браузерами (Safari,Opera, Chrome, Android Browser, IE и FF)● Не поддерживается её развитие командой W3CWorking GroupWeb SQL Database
  12. 12. Проверка, поддерживает либраузер WebSQLif (window.openDatabase){//..операции с базой данных}WebSQL
  13. 13. Создание Базы данныхdb = openDatabase(mydb,1.0,Комментарий к базе данных,2*1024*1024);WebSQL
  14. 14. Создание таблицdb.transaction(function(tx){tx.executeSql(CREATE TABLE IF NOTEXISTS tweets (id INTEGER PRIMARY KEY,date, tweet ) );});WebSQL
  15. 15. Создание таблицdb.transaction(function(tx){tx.executeSql(CREATE TABLE IF NOTEXISTS tweets (id INTEGER PRIMARY KEY,date, tweet ) ,[],callback_success,callback_error);});WebSQL
  16. 16. WebSQL
  17. 17. Добавление данных в таблицуdb.transaction(function(tx){tx.executeSql(INSERT INTO tweets (date, tweet)VALUES (?,?),[(new Date), Первое сообщение])},callback_error_function);WebSQL
  18. 18. WebSQL
  19. 19. Извлечение данных из таблицыdb.transaction(function(tx){tx.executeSql(SELECT * FROM tweetsWHERE 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
  20. 20. Позитивные стороны:● По скорости быстрее чем WebSQL● Есть API как для синхронной так и дляасинхронной работы● ТранзакционностьНегативные стороны:● Неудобный интерфейс (не поддерживает SQL)● Нет удобств которые есть в SQL - сортировка,полнотекстовый поиск● Не поддерживаются всеми браузерами (FireFox,Chrome, IE-10, Opera и Safari)IndexedDB
  21. 21. Инициализация window.IndexedDBObjectwindow.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction;IndexedDB
  22. 22. Создание индексированной базыданныхvar request = window.indexedDB.open("Books");request.onsuccess = function(event){db = event.target.result;// обработка контроля версий// создание нового хранилища объектов};request.onerror = function(event){console.log(Ошибка инициализации базы данных);};IndexedDB
  23. 23. Создание хранилища объектовvar store = db.createObjectStore(classic, {keyPath: title,autoIncrement: false});// хранилище объектов готовоIndexedDB
  24. 24. Добавление(add) и помещение(put) объектов в хранилищеvar book = {title: "Название",author: "Автор",raiting: 10,date: (new Date).getTime();}READ_WRITE = IDBTransaction.READ_WRITEIndexedDB
  25. 25. Добавление(add) и обновление(put) объектов в хранилищеvar transaction = db.transaction([classic], READ_WRITE),store = transaction.objectStore(classic),request = store.put(book);IndexedDB
  26. 26. Извлечение объектов (get)var transaction = db.transaction([classic], READ_WRITE),store = transaction.objectStore(classic),request = store.get(key);IndexedDB
  27. 27. ● Вопросы кроссбраузерности баз данных● Применение WebSQL и IndexedDB в современныхвеб-проектахОбщие моменты БД
  28. 28. WebSQL кроссбраузерность
  29. 29. IndexedDB кроссбраузерность
  30. 30. ● Сохранение и работа сбольшими объемамиструктурированных данных● Поддержка разных типов● Большая скорость● Возможность кешированиябольших объемов данных(работа как веб приложение)● Транзакционность, асинхронностьБазы данных. Сейчас и завтра

×