Databases on Client Side
0 likes517 views
Документ обсуждает различные способы хранения данных на стороне клиента, включая WebSQL и IndexedDB, с примерами кода и синтаксиса. Указываются преимущества и недостатки каждого подхода, а также вопросы кроссбраузерности и поддержка функционала. Обсуждается применение этих технологий в современных веб-проектах, акцентируя внимание на их скорости и транзакционности.
![Создание таблиц
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT
EXISTS tweets (id INTEGER PRIMARY KEY,
date, tweet ) ',[],callback_success,
callback_error);
});
WebSQL](https://image.slidesharecdn.com/databasesonclientside-130424071132-phpapp01/85/Databases-on-Client-Side-16-320.jpg)
![Добавление данных в таблицу
db.transaction(function(tx){
tx.executeSql('INSERT INTO tweets (date, tweet)
VALUES (?,?)',
[(new Date), 'Первое сообщение'])
},
callback_error_function
);
WebSQL](https://image.slidesharecdn.com/databasesonclientside-130424071132-phpapp01/85/Databases-on-Client-Side-18-320.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](https://image.slidesharecdn.com/databasesonclientside-130424071132-phpapp01/85/Databases-on-Client-Side-20-320.jpg)
![Добавление(add) и обновление
(put) объектов в хранилище
var transaction = db.transaction(['classic'], READ_WRITE),
store = transaction.objectStore('classic'),
request = store.put(book);
IndexedDB](https://image.slidesharecdn.com/databasesonclientside-130424071132-phpapp01/85/Databases-on-Client-Side-26-320.jpg)
![Извлечение объектов (get)
var transaction = db.transaction(['classic'], READ_WRITE),
store = transaction.objectStore('classic'),
request = store.get(key);
IndexedDB](https://image.slidesharecdn.com/databasesonclientside-130424071132-phpapp01/85/Databases-on-Client-Side-27-320.jpg)
Databases on Client Side
- 1. Databases on client side tips and tricks Lemekha Denys Web Developer
- 2. ● Виды сохранения данных на стороне клиента ● Базы данных на клиенте, что это такое? ● WebSQL (синтаксис, примеры кода) ● IndexedDB (примеры кода) ● Вопросы кроссбраузерности баз данных ● Применение WebSQL и IndexedDB в современных веб-проектах План
- 3. Куки WebStorage (Local Storage) Базы данных Виды сохранения данных на стороне клиента
- 4. Данные
- 5. Куки
- 6. Куки
- 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 в современных веб-проектах Общие моменты БД
- 31. ● Сохранение и работа с большими объемами структурированных данных ● Поддержка разных типов ● Большая скорость ● Возможность кеширования больших объемов данных (работа как веб приложение) ● Транзакционность, асинхронность Базы данных. Сейчас и завтра