HTML5 приложения за Android, урок 5

10
HTML5 Android приложения за 05 Урок Леон Анави @leonanavi [email protected] : С подкрепата на

Transcript of HTML5 приложения за Android, урок 5

Page 1: HTML5 приложения за Android, урок 5

H T M L 5 A n d ro i dприложения за 0 5Урок

Леон Анави@ l e o n a n a v il e o n @ a n a v i . o r g

:Сподкрепатана

Page 2: HTML5 приложения за Android, урок 5

@leonanavi

Съдържание

Web Storage

WebSQL

IndexDB

Демонстрации

Page 3: HTML5 приложения за Android, урок 5

@leonanavi

W e b S t o r a g e

Session storage

Local storage

// Запаметяваненастойност b a r заключ f o o .localStorage.s e t S t o r a g e ('foo', 'bar');

// Прочитаненастойносттана f o ovar foo = localStorage.g e t I t e m ('foo');

Page 4: HTML5 приложения за Android, урок 5

@leonanavi

W e b S Q L D a t a b a s e

SQL , SQL Liteбазаотданни коятоебазирана HTML5 2010 .Отпаднаот стандартитепрез г

D e s k t o p B ro w s e r s

Chrome, Opera SafariРаботина и Firefox Internet ExplorerНеработина и

Проверетедаливашияуеббраузъряподдържанаhttp://html5test.com/

Page 5: HTML5 приложения за Android, урок 5

@leonanavi

W e b S Q L D BСъздаване наvar db = null;var dbVersion = 1.0;var dbName = "TuxCon2014";var dbDesc = "FOSS conference";var dbSize = 1024 * 1024; //1MBtry {

db = o p e n D a t a b a s e (dbName, dbVersion, dbDesc, dbSize);}catch(err) {

console.log(err.message);}

Page 6: HTML5 приложения за Android, урок 5

@leonanavi

Изпълнение на заявки// Създаваненатаблицаdb.t r a n s a c t i o n (function (transaction) {

t r a n s a c t i o n . e x e c u t e S q l ("CREATE TABLE IF NOT EXISTS tbl (id INTEGER PRIMARY KEY, content TEXT)");});

// Добавяненаданниdb.t r a n s a c t i o n (function (transaction) {

transaction. e x e c u t e S q l ("INSERT INTO tbl(id, content) VALUES (?, ?)", [1, 'foo']);});

Page 7: HTML5 приложения за Android, урок 5

@leonanavi

I n d e x e d D B

Усъвършенстванасистемазасъхранениенаголеми количестваобектисключовеистойности

HTML5Частот Поддържасеотвсичкимодернибраузъри JavaScript Изграденанабазатана обекти Използватранзакции

Page 8: HTML5 приложения за Android, урок 5

@leonanavi

I n d e x e d D BПринцип на работа с

IndexedDB .Отворете базаотданни Създайтеструктуразаскладираненаобектив

.базата .Изпълнетеоперациясданнитечрезтранзакция , , Изчакайтезасъбитие коетоуведомява че

.операциятаезавършилауспешно .Обработетерезултата

Page 9: HTML5 приложения за Android, урок 5

@leonanavi

Демо

GitHub:Вземетекодаотgit clone https://github.com/leon-anavi/html5-android-course.git

:Илиаковечегоиматеgit pull

Cordova WebStorage, Разглейдайтепримерните приложениязаWebSQL IndexedDB и вдиректория lesson05.

Page 10: HTML5 приложения за Android, урок 5

@leonanavi

KEEP CALM AND

SUPPORT FOSS