Документ обсуждает различные способы хранения данных на стороне клиента, включая WebSQL и IndexedDB, с примерами кода и синтаксиса. Указываются преимущества и недостатки каждого подхода, а также вопросы кроссбраузерности и поддержка функционала. Обсуждается применение этих технологий в современных веб-проектах, акцентируя внимание на их скорости и транзакционности.

1. Databases on client side
tips and tricks
Lemekha Denys
Web Developer

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

3. Куки
WebStorage (Local Storage)
Базы данных
Виды сохранения данных
на стороне клиента

4. Данные

5. Куки

6. Куки

8. Local Storage

9. Базы данных

10. Куки
Ограниченность кол-ва на 1 домен и общего
числа, размер кук (4кБ), ограниченное API
Local Storage
Работет синхронно и блокирует браузер
Базы данных
● Поддержка работы с сложными структурно и
большими объемами данных
● Работают как синхронно так и асинхронно
● Поддерживают транзакции
Отличия хранилищ

11. WebSQL & IndexedDB
Виды клиентских БД

12. Позитивные стороны:
● Поддерживается SQL синтаксис - удобство в
разработке. Основана на SQLite технологии
● Транзакционность
Негативные стороны:
● Не поддерживаются всеми браузерами (Safari,
Opera, Chrome, Android Browser, IE и FF)
● Не поддерживается её развитие командой W3C
Working Group
Web SQL Database

13. Проверка, поддерживает ли
браузер WebSQL
if (window.openDatabase){
//..операции с базой данных
}
WebSQL

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

15. Создание таблиц
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT
EXISTS tweets (id INTEGER PRIMARY KEY,
date, tweet ) ');
});
WebSQL

16. Создание таблиц
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT
EXISTS tweets (id INTEGER PRIMARY KEY,
date, tweet ) ',[],callback_success,
callback_error);
});
WebSQL

17. WebSQL

18. Добавление данных в таблицу
db.transaction(function(tx){
tx.executeSql('INSERT INTO tweets (date, tweet)
VALUES (?,?)',
[(new Date), 'Первое сообщение'])
},
callback_error_function
);
WebSQL

19. WebSQL

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

22. Инициализация window.IndexedDB
Object
window.indexedDB = window.indexedDB || window.
mozIndexedDB || window.webkitIndexedDB || window.
msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction;
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 в современных
веб-проектах
Общие моменты БД

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

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

31. ● Сохранение и работа с
большими объемами
структурированных данных
● Поддержка разных типов
● Большая скорость
● Возможность кеширования
больших объемов данных
(работа как веб приложение)
● Транзакционность, асинхронность
Базы данных. Сейчас и завтра