SlideShare a Scribd company logo
A Database For The Web
IndexedDB
IndexedDB 2
Who Am I
● @freaktechnik
– See also @MozillaCH
IndexedDB 3
What IndexedDB Is Not
● (Web)SQL
● Synchronous
● Cross-Origin
IndexedDB 4
Initialize A Database
var db = window.indexedDB.open("example", 1);
IndexedDB 5
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
};
IndexedDB 6
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
};
// Get the DB if it already exists
request.onready = function(e) {
db = e.target.result;
};
IndexedDB 7
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
var table = db.createObjectStore("table", {
keyPath: "id",
autoIncrement: true
});
};
IndexedDB 8
Key Generators
● Out-of-line keys
– AutoIncrement makes the browser generate a
unique key
– Actual generation is browser dependent and
shouldn't matter to you
● In-line keys
– You set a unique key in the object
IndexedDB 9
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
var table = db.createObjectStore("table", {
keyPath: "id",
autoIncrement: true
});
table.createIndex("anIndex", ["two", "keys"],
{ unique: true });
};
IndexedDB 10
KeyPaths
● W3C:
– „A key path is a DOMString or
sequence<DOMString> that defines how to
extract a key from a value.“
● Describe one or multiple properties in an object
● Commas to step into an object
● Arrays to select multiple properties
IndexedDB 11
KeyPath Example
● "deeper,array,length" is 2
● [ "length", "name" ] is [ 3, "example object" ]
● [ "name", "deeper,array" ] is [ "example object",
[ 0, 1 ] ]
{
name: "example object",
length: 3,
deeper: { array: [ 0, 1 ] }
}
IndexedDB 12
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.objectStore("table");
// Add some data to the object store
var request = objectStore.add({
"two": 2,
"keys": [ "some data"]
});
request.onsuccess = function(e) {
var id = request.result.id;
};
request.onerror = function(error) {
// error is a DOMError.
};
IndexedDB 13
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.objectStore("table");
// Add an array of things to the db
array.forEach(function(data) {
objectStore.add(data);
});
transaction.oncomplete = function(e) {
// all the items have now been added.
};
IndexedDB 14
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.objectStore("table");
// Add some data to the object store
var request = objectStore.put(obj);
var request = objectStore.delete(id);
var request = objectStore.clear();
var request = objectStore.get(id);
// You can optionally limit it on specific keys with
keyRange
var request = objectStore.count(keyRange);
// cursor & indexes: coming up next
var index = objectStore.index(indexName);
var request = objectStore.openCursor(...);
IndexedDB 15
Using Indexes
var transaction = db.transaction(["table"],
"readonly");
var objectStore = transaction.objectStore("table");
// let's use an index
var index = objectStore.index("anIndex");
// let's read something from the index
var request = index.get([ 2, "some data" ]);
request.oncomplete = function(e) {
callback(request.result);
};
IndexedDB 16
Iterating With Cursors
var transaction = db.transaction(["table"],
"readonly");
var objectStore = transaction.objectStore("table");
// Iterate over all elements
var keyRange = IDBKeyRange.bound(1, 5);
var request = objectStore.openCursor(keyRange,
"next");
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
doSomethingWith(cursor.value);
cursor.continue();
}
};
IndexedDB 17
KeyRanges
Range Code
Value ≤ x IDBKeyRange.upperBound(x)
Value < x IDBKeyRange.upperBound(x, true)
Value ≥ y IDBKeyRange.lowerBound(y)
Value > y IDBKeyRange.lowerBound(y, true)
y ≤ Value ≤ x IDBKeyRange.bound(y, x)
y < Value ≤ x IDBKeyRange.bound(y, x, true)
y ≤ Value < x IDBKeyRange.bound(y, x, false, true)
y < Value < x IDBKeyRange.bound(y, x, true, true)
Value = z IDBKeyRange.only(z)
IndexedDB 18
CanIUse IndexedDB
● Yes
● No complex structures with IE 10 & 11
● You guessed it, iOS 8
IndexedDB 19
Documentation
● You like W3C madness? http://www.w3.org/TR/IndexedDB/
● You like things organized by interface?
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
IndexedDB 20
Examples
● https://github.com/freaktechnik/justintv-stream-notifications/blob/mas
● https://github.com/freaktechnik/mines.js/blob/master/src/highscores.
● https://github.com/mdn/to-do-notifications/tree/gh-pages

More Related Content

What's hot

Single page application 07
Single page application   07Single page application   07
Single page application 07
Ismaeel Enjreny
 
Hands On Spring Data
Hands On Spring DataHands On Spring Data
Hands On Spring Data
Eric Bottard
 
09.Local Database Files and Storage on WP
09.Local Database Files and Storage on WP09.Local Database Files and Storage on WP
09.Local Database Files and Storage on WP
Nguyen Tuan
 
Elasticsearch and Symfony Integration - Debarko De
Elasticsearch and Symfony Integration - Debarko DeElasticsearch and Symfony Integration - Debarko De
Elasticsearch and Symfony Integration - Debarko De
Debarko De
 
Intro to HTML5 Web Storage
Intro to HTML5 Web StorageIntro to HTML5 Web Storage
Intro to HTML5 Web Storage
dylanks
 
Hack tutorial
Hack tutorialHack tutorial
Hack tutorial
Wakana Yoshizawa
 
第一次用Parse就深入淺出
第一次用Parse就深入淺出第一次用Parse就深入淺出
第一次用Parse就深入淺出
Ymow Wu
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDB
Sqreen
 
Core Data Migration
Core Data MigrationCore Data Migration
Core Data Migration
Monica Kurup
 
MongoDB and RDBMS
MongoDB and RDBMSMongoDB and RDBMS
MongoDB and RDBMS
francescapasha
 
Academy PRO: Elasticsearch. Data management
Academy PRO: Elasticsearch. Data managementAcademy PRO: Elasticsearch. Data management
Academy PRO: Elasticsearch. Data management
Binary Studio
 
React 101
React 101React 101
React 101
Casear Chu
 
Railson dickinson 5 mil seguidores
Railson dickinson 5 mil seguidoresRailson dickinson 5 mil seguidores
Railson dickinson 5 mil seguidores
Railson Dickinson
 
Asp.net MVC DI
Asp.net MVC DIAsp.net MVC DI
Asp.net MVC DI
LearningTech
 
Beyond the page
Beyond the pageBeyond the page
Beyond the page
Glenn Jones
 
Data Abstraction for Large Web Applications
Data Abstraction for Large Web ApplicationsData Abstraction for Large Web Applications
Data Abstraction for Large Web Applications
brandonsavage
 
Users as Data
Users as DataUsers as Data
Users as Data
pdingles
 
Building Go Web Apps
Building Go Web AppsBuilding Go Web Apps
Building Go Web Apps
Mark
 
Mongo db for c# developers
Mongo db for c# developersMongo db for c# developers
Mongo db for c# developers
Simon Elliston Ball
 
Android Data Storagefinal
Android Data StoragefinalAndroid Data Storagefinal
Android Data Storagefinal
Nakka Srilakshmi
 

What's hot (20)

Single page application 07
Single page application   07Single page application   07
Single page application 07
 
Hands On Spring Data
Hands On Spring DataHands On Spring Data
Hands On Spring Data
 
09.Local Database Files and Storage on WP
09.Local Database Files and Storage on WP09.Local Database Files and Storage on WP
09.Local Database Files and Storage on WP
 
Elasticsearch and Symfony Integration - Debarko De
Elasticsearch and Symfony Integration - Debarko DeElasticsearch and Symfony Integration - Debarko De
Elasticsearch and Symfony Integration - Debarko De
 
Intro to HTML5 Web Storage
Intro to HTML5 Web StorageIntro to HTML5 Web Storage
Intro to HTML5 Web Storage
 
Hack tutorial
Hack tutorialHack tutorial
Hack tutorial
 
第一次用Parse就深入淺出
第一次用Parse就深入淺出第一次用Parse就深入淺出
第一次用Parse就深入淺出
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDB
 
Core Data Migration
Core Data MigrationCore Data Migration
Core Data Migration
 
MongoDB and RDBMS
MongoDB and RDBMSMongoDB and RDBMS
MongoDB and RDBMS
 
Academy PRO: Elasticsearch. Data management
Academy PRO: Elasticsearch. Data managementAcademy PRO: Elasticsearch. Data management
Academy PRO: Elasticsearch. Data management
 
React 101
React 101React 101
React 101
 
Railson dickinson 5 mil seguidores
Railson dickinson 5 mil seguidoresRailson dickinson 5 mil seguidores
Railson dickinson 5 mil seguidores
 
Asp.net MVC DI
Asp.net MVC DIAsp.net MVC DI
Asp.net MVC DI
 
Beyond the page
Beyond the pageBeyond the page
Beyond the page
 
Data Abstraction for Large Web Applications
Data Abstraction for Large Web ApplicationsData Abstraction for Large Web Applications
Data Abstraction for Large Web Applications
 
Users as Data
Users as DataUsers as Data
Users as Data
 
Building Go Web Apps
Building Go Web AppsBuilding Go Web Apps
Building Go Web Apps
 
Mongo db for c# developers
Mongo db for c# developersMongo db for c# developers
Mongo db for c# developers
 
Android Data Storagefinal
Android Data StoragefinalAndroid Data Storagefinal
Android Data Storagefinal
 

Viewers also liked

Interactive Marketing 2010
Interactive Marketing 2010Interactive Marketing 2010
Interactive Marketing 2010
The Loud Few
 
P1151420328
P1151420328P1151420328
P1151420328
Ashraf Aboshosha
 
Imam Dhahabi - Kitaab al-Arsh (Arabic)
Imam Dhahabi - Kitaab al-Arsh (Arabic)Imam Dhahabi - Kitaab al-Arsh (Arabic)
Imam Dhahabi - Kitaab al-Arsh (Arabic)
guest647712b0
 
Top Ten in PR Writing
Top Ten in PR WritingTop Ten in PR Writing
Top Ten in PR Writing
guesta74dc8
 
Ονοματικές και Ρηματικές Φράσεις
Ονοματικές και Ρηματικές ΦράσειςΟνοματικές και Ρηματικές Φράσεις
Ονοματικές και Ρηματικές Φράσεις
Christos Skarkos
 
Elements of artjustine
Elements of artjustineElements of artjustine
Elements of artjustine
gzorskas
 
Reggae
ReggaeReggae
Reggae
gzorskas
 
P1111146023
P1111146023P1111146023
P1111146023
Ashraf Aboshosha
 
Oilfield Pics
Oilfield PicsOilfield Pics
Oilfield Pics
miketessari
 
Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...
Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...
Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...
Christos Skarkos
 
Evaluation
EvaluationEvaluation
Evaluation
guested0a0dd
 
Ocd
OcdOcd
P1150803001
P1150803001P1150803001
P1150803001
Ashraf Aboshosha
 
An update on psychopharmacology part i 22 june 2007 fountain house
An update on psychopharmacology part i 22 june 2007 fountain houseAn update on psychopharmacology part i 22 june 2007 fountain house
An update on psychopharmacology part i 22 june 2007 fountain house
Pk Doctors
 
разные поделки
разные                   поделкиразные                   поделки
разные поделки
sonea11111
 
Footprints Of Disaster.Okspra Hndts
Footprints Of Disaster.Okspra HndtsFootprints Of Disaster.Okspra Hndts
Footprints Of Disaster.Okspra Hndts
rcastleberry
 
Tourism: A Path to Competitiveness for Georgia
Tourism: A Path to Competitiveness for GeorgiaTourism: A Path to Competitiveness for Georgia
Tourism: A Path to Competitiveness for Georgia
SW Associates, LLC
 
Quality stories october
Quality stories  octoberQuality stories  october
Quality stories october
samsungmena
 
Sales Force Training and Mobile Development
Sales Force Training and Mobile DevelopmentSales Force Training and Mobile Development
Sales Force Training and Mobile Development
toddzaugg
 
Chapter 4: Dimensions of Cultures
Chapter 4: Dimensions of CulturesChapter 4: Dimensions of Cultures
Chapter 4: Dimensions of Cultures
ferdos
 

Viewers also liked (20)

Interactive Marketing 2010
Interactive Marketing 2010Interactive Marketing 2010
Interactive Marketing 2010
 
P1151420328
P1151420328P1151420328
P1151420328
 
Imam Dhahabi - Kitaab al-Arsh (Arabic)
Imam Dhahabi - Kitaab al-Arsh (Arabic)Imam Dhahabi - Kitaab al-Arsh (Arabic)
Imam Dhahabi - Kitaab al-Arsh (Arabic)
 
Top Ten in PR Writing
Top Ten in PR WritingTop Ten in PR Writing
Top Ten in PR Writing
 
Ονοματικές και Ρηματικές Φράσεις
Ονοματικές και Ρηματικές ΦράσειςΟνοματικές και Ρηματικές Φράσεις
Ονοματικές και Ρηματικές Φράσεις
 
Elements of artjustine
Elements of artjustineElements of artjustine
Elements of artjustine
 
Reggae
ReggaeReggae
Reggae
 
P1111146023
P1111146023P1111146023
P1111146023
 
Oilfield Pics
Oilfield PicsOilfield Pics
Oilfield Pics
 
Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...
Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...
Βιωματική μάθηση και διδασκαλία:Εμπειρίες από την υλοποίηση βιωματικών εκπαιδ...
 
Evaluation
EvaluationEvaluation
Evaluation
 
Ocd
OcdOcd
Ocd
 
P1150803001
P1150803001P1150803001
P1150803001
 
An update on psychopharmacology part i 22 june 2007 fountain house
An update on psychopharmacology part i 22 june 2007 fountain houseAn update on psychopharmacology part i 22 june 2007 fountain house
An update on psychopharmacology part i 22 june 2007 fountain house
 
разные поделки
разные                   поделкиразные                   поделки
разные поделки
 
Footprints Of Disaster.Okspra Hndts
Footprints Of Disaster.Okspra HndtsFootprints Of Disaster.Okspra Hndts
Footprints Of Disaster.Okspra Hndts
 
Tourism: A Path to Competitiveness for Georgia
Tourism: A Path to Competitiveness for GeorgiaTourism: A Path to Competitiveness for Georgia
Tourism: A Path to Competitiveness for Georgia
 
Quality stories october
Quality stories  octoberQuality stories  october
Quality stories october
 
Sales Force Training and Mobile Development
Sales Force Training and Mobile DevelopmentSales Force Training and Mobile Development
Sales Force Training and Mobile Development
 
Chapter 4: Dimensions of Cultures
Chapter 4: Dimensions of CulturesChapter 4: Dimensions of Cultures
Chapter 4: Dimensions of Cultures
 

Similar to Indexed db

Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)
Mike West
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Parashuram N
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
Gil Fink
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
Gil Fink
 
Whos afraid of front end databases?
Whos afraid of front end databases?Whos afraid of front end databases?
Whos afraid of front end databases?
Gil Fink
 
Persistent Memoization with HTML5 indexedDB and jQuery Promises
Persistent Memoization with HTML5 indexedDB and jQuery PromisesPersistent Memoization with HTML5 indexedDB and jQuery Promises
Persistent Memoization with HTML5 indexedDB and jQuery Promises
Ray Bellis
 
Persitance Data with sqlite
Persitance Data with sqlitePersitance Data with sqlite
Persitance Data with sqlite
Arif Huda
 
Working with disconnected data in Windows Store apps
Working with disconnected data in Windows Store appsWorking with disconnected data in Windows Store apps
Working with disconnected data in Windows Store apps
Alex Casquete
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
Nick Lee
 
Save your data
Save your dataSave your data
Save your data
fragphace
 
Rapid Prototyping with PEAR
Rapid Prototyping with PEARRapid Prototyping with PEAR
Rapid Prototyping with PEAR
Markus Wolff
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
dion
 
Java Web Programming Using Cloud Platform: Module 3
Java Web Programming Using Cloud Platform: Module 3Java Web Programming Using Cloud Platform: Module 3
Java Web Programming Using Cloud Platform: Module 3
IMC Institute
 
Drupal II: The SQL
Drupal II: The SQLDrupal II: The SQL
Drupal II: The SQL
ddiers
 
Java Web Programming [3/9] : Servlet Advanced
Java Web Programming [3/9] : Servlet AdvancedJava Web Programming [3/9] : Servlet Advanced
Java Web Programming [3/9] : Servlet Advanced
IMC Institute
 
Softshake - Offline applications
Softshake - Offline applicationsSoftshake - Offline applications
Softshake - Offline applications
jeromevdl
 
Web storage
Web storageWeb storage
Web storage
Junji Manno
 
Doctrine and NoSQL
Doctrine and NoSQLDoctrine and NoSQL
Doctrine and NoSQL
Benjamin Eberlei
 
Simplifying JavaScript Projects with ReactJS
Simplifying JavaScript Projects with ReactJSSimplifying JavaScript Projects with ReactJS
Simplifying JavaScript Projects with ReactJS
Kevin Dangoor
 
[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps
Ivano Malavolta
 

Similar to Indexed db (20)

Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
 
Whos afraid of front end databases?
Whos afraid of front end databases?Whos afraid of front end databases?
Whos afraid of front end databases?
 
Persistent Memoization with HTML5 indexedDB and jQuery Promises
Persistent Memoization with HTML5 indexedDB and jQuery PromisesPersistent Memoization with HTML5 indexedDB and jQuery Promises
Persistent Memoization with HTML5 indexedDB and jQuery Promises
 
Persitance Data with sqlite
Persitance Data with sqlitePersitance Data with sqlite
Persitance Data with sqlite
 
Working with disconnected data in Windows Store apps
Working with disconnected data in Windows Store appsWorking with disconnected data in Windows Store apps
Working with disconnected data in Windows Store apps
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Save your data
Save your dataSave your data
Save your data
 
Rapid Prototyping with PEAR
Rapid Prototyping with PEARRapid Prototyping with PEAR
Rapid Prototyping with PEAR
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Java Web Programming Using Cloud Platform: Module 3
Java Web Programming Using Cloud Platform: Module 3Java Web Programming Using Cloud Platform: Module 3
Java Web Programming Using Cloud Platform: Module 3
 
Drupal II: The SQL
Drupal II: The SQLDrupal II: The SQL
Drupal II: The SQL
 
Java Web Programming [3/9] : Servlet Advanced
Java Web Programming [3/9] : Servlet AdvancedJava Web Programming [3/9] : Servlet Advanced
Java Web Programming [3/9] : Servlet Advanced
 
Softshake - Offline applications
Softshake - Offline applicationsSoftshake - Offline applications
Softshake - Offline applications
 
Web storage
Web storageWeb storage
Web storage
 
Doctrine and NoSQL
Doctrine and NoSQLDoctrine and NoSQL
Doctrine and NoSQL
 
Simplifying JavaScript Projects with ReactJS
Simplifying JavaScript Projects with ReactJSSimplifying JavaScript Projects with ReactJS
Simplifying JavaScript Projects with ReactJS
 
[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps
 

More from Martin Giger

Brief Introduction to the Mozilla Add-on SDK
Brief Introduction to the Mozilla Add-on SDKBrief Introduction to the Mozilla Add-on SDK
Brief Introduction to the Mozilla Add-on SDK
Martin Giger
 
Nightingale Features Showcase
Nightingale Features ShowcaseNightingale Features Showcase
Nightingale Features Showcase
Martin Giger
 
Nightingale Social & Cloud mockup
Nightingale Social & Cloud mockupNightingale Social & Cloud mockup
Nightingale Social & Cloud mockup
Martin Giger
 
Ozon / Melanom
Ozon / MelanomOzon / Melanom
Ozon / Melanom
Martin Giger
 
ig_chino plakat 2010
ig_chino plakat 2010ig_chino plakat 2010
ig_chino plakat 2010
Martin Giger
 
ig_chino Flyer 2010
ig_chino Flyer 2010ig_chino Flyer 2010
ig_chino Flyer 2010
Martin Giger
 
Open source software
Open source softwareOpen source software
Open source software
Martin Giger
 
Friedrich Schiller
Friedrich SchillerFriedrich Schiller
Friedrich Schiller
Martin Giger
 
Jacob Und Willhelm Grimm
Jacob Und Willhelm GrimmJacob Und Willhelm Grimm
Jacob Und Willhelm Grimm
Martin Giger
 
Hochdruck oder Tiefdruck
Hochdruck oder TiefdruckHochdruck oder Tiefdruck
Hochdruck oder Tiefdruck
Martin Giger
 
Wie Funktioniert ein Hochregallager
Wie Funktioniert ein HochregallagerWie Funktioniert ein Hochregallager
Wie Funktioniert ein Hochregallager
Martin Giger
 
Schimmelpilze
SchimmelpilzeSchimmelpilze
Schimmelpilze
Martin Giger
 
BNSF Präsentation
BNSF PräsentationBNSF Präsentation
BNSF Präsentation
Martin Giger
 
Staatsbankrott von Griechenland
Staatsbankrott von GriechenlandStaatsbankrott von Griechenland
Staatsbankrott von Griechenland
Martin Giger
 

More from Martin Giger (19)

Brief Introduction to the Mozilla Add-on SDK
Brief Introduction to the Mozilla Add-on SDKBrief Introduction to the Mozilla Add-on SDK
Brief Introduction to the Mozilla Add-on SDK
 
Nightingale Features Showcase
Nightingale Features ShowcaseNightingale Features Showcase
Nightingale Features Showcase
 
Nightingale Social & Cloud mockup
Nightingale Social & Cloud mockupNightingale Social & Cloud mockup
Nightingale Social & Cloud mockup
 
Ozon / Melanom
Ozon / MelanomOzon / Melanom
Ozon / Melanom
 
ig_chino plakat 2010
ig_chino plakat 2010ig_chino plakat 2010
ig_chino plakat 2010
 
ig_chino Flyer 2010
ig_chino Flyer 2010ig_chino Flyer 2010
ig_chino Flyer 2010
 
Plakat 2009
Plakat 2009Plakat 2009
Plakat 2009
 
Open source software
Open source softwareOpen source software
Open source software
 
Was ist HDTV
Was ist HDTVWas ist HDTV
Was ist HDTV
 
Friedrich Schiller
Friedrich SchillerFriedrich Schiller
Friedrich Schiller
 
Jacob Und Willhelm Grimm
Jacob Und Willhelm GrimmJacob Und Willhelm Grimm
Jacob Und Willhelm Grimm
 
Hochdruck oder Tiefdruck
Hochdruck oder TiefdruckHochdruck oder Tiefdruck
Hochdruck oder Tiefdruck
 
Otto Waalkes
Otto WaalkesOtto Waalkes
Otto Waalkes
 
Wie Funktioniert ein Hochregallager
Wie Funktioniert ein HochregallagerWie Funktioniert ein Hochregallager
Wie Funktioniert ein Hochregallager
 
Ol Doinyo Lengai
Ol Doinyo LengaiOl Doinyo Lengai
Ol Doinyo Lengai
 
Fabian Unteregger
Fabian UntereggerFabian Unteregger
Fabian Unteregger
 
Schimmelpilze
SchimmelpilzeSchimmelpilze
Schimmelpilze
 
BNSF Präsentation
BNSF PräsentationBNSF Präsentation
BNSF Präsentation
 
Staatsbankrott von Griechenland
Staatsbankrott von GriechenlandStaatsbankrott von Griechenland
Staatsbankrott von Griechenland
 

Recently uploaded

Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
Priyanka Aash
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
Toru Wonyoung Choi
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 

Recently uploaded (20)

Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 

Indexed db

  • 1. A Database For The Web IndexedDB
  • 2. IndexedDB 2 Who Am I ● @freaktechnik – See also @MozillaCH
  • 3. IndexedDB 3 What IndexedDB Is Not ● (Web)SQL ● Synchronous ● Cross-Origin
  • 4. IndexedDB 4 Initialize A Database var db = window.indexedDB.open("example", 1);
  • 5. IndexedDB 5 Initialize A Database var request = window.indexedDB.open("example", 1); var db; // Create the DB structure request.onupgradeneeded = function(e) { db = e.target.result; };
  • 6. IndexedDB 6 Initialize A Database var request = window.indexedDB.open("example", 1); var db; // Create the DB structure request.onupgradeneeded = function(e) { db = e.target.result; }; // Get the DB if it already exists request.onready = function(e) { db = e.target.result; };
  • 7. IndexedDB 7 Initialize A Database var request = window.indexedDB.open("example", 1); var db; // Create the DB structure request.onupgradeneeded = function(e) { db = e.target.result; var table = db.createObjectStore("table", { keyPath: "id", autoIncrement: true }); };
  • 8. IndexedDB 8 Key Generators ● Out-of-line keys – AutoIncrement makes the browser generate a unique key – Actual generation is browser dependent and shouldn't matter to you ● In-line keys – You set a unique key in the object
  • 9. IndexedDB 9 Initialize A Database var request = window.indexedDB.open("example", 1); var db; // Create the DB structure request.onupgradeneeded = function(e) { db = e.target.result; var table = db.createObjectStore("table", { keyPath: "id", autoIncrement: true }); table.createIndex("anIndex", ["two", "keys"], { unique: true }); };
  • 10. IndexedDB 10 KeyPaths ● W3C: – „A key path is a DOMString or sequence<DOMString> that defines how to extract a key from a value.“ ● Describe one or multiple properties in an object ● Commas to step into an object ● Arrays to select multiple properties
  • 11. IndexedDB 11 KeyPath Example ● "deeper,array,length" is 2 ● [ "length", "name" ] is [ 3, "example object" ] ● [ "name", "deeper,array" ] is [ "example object", [ 0, 1 ] ] { name: "example object", length: 3, deeper: { array: [ 0, 1 ] } }
  • 12. IndexedDB 12 Use A Database var transaction = db.transaction(["table"], "readwrite"); var objectStore = transaction.objectStore("table"); // Add some data to the object store var request = objectStore.add({ "two": 2, "keys": [ "some data"] }); request.onsuccess = function(e) { var id = request.result.id; }; request.onerror = function(error) { // error is a DOMError. };
  • 13. IndexedDB 13 Use A Database var transaction = db.transaction(["table"], "readwrite"); var objectStore = transaction.objectStore("table"); // Add an array of things to the db array.forEach(function(data) { objectStore.add(data); }); transaction.oncomplete = function(e) { // all the items have now been added. };
  • 14. IndexedDB 14 Use A Database var transaction = db.transaction(["table"], "readwrite"); var objectStore = transaction.objectStore("table"); // Add some data to the object store var request = objectStore.put(obj); var request = objectStore.delete(id); var request = objectStore.clear(); var request = objectStore.get(id); // You can optionally limit it on specific keys with keyRange var request = objectStore.count(keyRange); // cursor & indexes: coming up next var index = objectStore.index(indexName); var request = objectStore.openCursor(...);
  • 15. IndexedDB 15 Using Indexes var transaction = db.transaction(["table"], "readonly"); var objectStore = transaction.objectStore("table"); // let's use an index var index = objectStore.index("anIndex"); // let's read something from the index var request = index.get([ 2, "some data" ]); request.oncomplete = function(e) { callback(request.result); };
  • 16. IndexedDB 16 Iterating With Cursors var transaction = db.transaction(["table"], "readonly"); var objectStore = transaction.objectStore("table"); // Iterate over all elements var keyRange = IDBKeyRange.bound(1, 5); var request = objectStore.openCursor(keyRange, "next"); request.onsuccess = function(e) { var cursor = e.target.result; if(cursor) { doSomethingWith(cursor.value); cursor.continue(); } };
  • 17. IndexedDB 17 KeyRanges Range Code Value ≤ x IDBKeyRange.upperBound(x) Value < x IDBKeyRange.upperBound(x, true) Value ≥ y IDBKeyRange.lowerBound(y) Value > y IDBKeyRange.lowerBound(y, true) y ≤ Value ≤ x IDBKeyRange.bound(y, x) y < Value ≤ x IDBKeyRange.bound(y, x, true) y ≤ Value < x IDBKeyRange.bound(y, x, false, true) y < Value < x IDBKeyRange.bound(y, x, true, true) Value = z IDBKeyRange.only(z)
  • 18. IndexedDB 18 CanIUse IndexedDB ● Yes ● No complex structures with IE 10 & 11 ● You guessed it, iOS 8
  • 19. IndexedDB 19 Documentation ● You like W3C madness? http://www.w3.org/TR/IndexedDB/ ● You like things organized by interface? https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
  • 20. IndexedDB 20 Examples ● https://github.com/freaktechnik/justintv-stream-notifications/blob/mas ● https://github.com/freaktechnik/mines.js/blob/master/src/highscores. ● https://github.com/mdn/to-do-notifications/tree/gh-pages

Editor's Notes

  1. Ask questions right away Mention slide number for reference to relevant code snippets There&amp;apos;s also a mailinglist, linked on the twitter Will post link to these slides on meetup
  2. Service workers Clientside → backend syncing like wunderlist
  3. e.target == request e is a DOMEvent Onupgradeneeded is called on any version change (nothing to one in our case) Db has properties like version, and a close method, for example.
  4. Also onerror and onblocked (opening only)
  5. ObjectStores!!!11 RemoveObjectStore counterpart Only usable in onupgradeneeded
  6. Also removeIndex, ofc
  7. Source: http://w3c.github.io/IndexedDB/
  8. Some special object properties from builtin objects work, like length
  9. Transactions!!!11 Everything is DOM: DOMEvent, DOMError, DOMString etc. There0s also the „readonly“ and „versionchange“ modes.
  10. Oncomplete doesn&amp;apos;t guarantee flush to disk (well, should or something. Firefox has transaction flush thing) You can abort transactions before oncomplete is fired
  11. Put vs. add
  12. Just read mode now for the transaction
  13. Open a cursor on the main db to get it sorted by the main index, open it on an index to sort that by that index. Direction next means from lower to higher, prev is higher to lower, unique makes it only visit unique cursor values, if the cursor is not unique this skips items.
  14. Source: https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange Undefined is ignored when sorting
  15. IE can&amp;apos;t handle non-string keyPaths and non-simple index values (like arrays or objects) Safari for iOS is just broken, and I don&amp;apos;t even care, since the initial implementation was also iOS 8 Sync APIs are deprecated, were for serviceWorkers...