Client storage

Client Side StorageStar wars

style

WebSQL and IndexedDB

Long time ago, in a galaxy far far away …

Storing on Browser• Partially Connected Applications– Can work offline also – Email, Calendar, Source Control ?

• Offline Applications– No connection to the internet required–Word processors, todo lists

• Data Caches– Privacy, Save bandwidth,– Shopping carts, user preferences

• Cookies – – Limited storage, key value pairs

• Local/Session Storage– Store {Key,Value} pairs– Iterate over values– Synchronous, no transactions– Not a database, don’t fake it

… days of the old republic …

... restoring balance to the force ...

• Google Gears:Database module– First release: 2007-05-31– Database API based on SQLite – built in

DB

• Web Database API– Dialect of SQLite 3 (ref)– Deprecated (ref)

IndexedDB Example

http://yourwebpage.com search

Database Database

... WebSql refresher...

Transactions

SQLite Dialect

Transactions

Create table bookShop (key varchar(255), value varchar(255))

Insert into bookShop values (“name”, “desc”)

Drop table bookShop

Select * from bookShop where name = ‘name’;

... an apprentice to a master ...

... an apprentice to a master ...

• Powerful query capabilities• Familiar SQL syntax, easy for

developers• Already supported by browsers, no

better alternative.

“User agents must implement the SQL dialect supported by Sqlite 3.6.19”

... Denying the destiny ...

... Denying the destiny ...

Come over to the dark side*

… the birth of a hero …

• WebSimpleDB– ISAM based store – influenced by

Berkley DB– Concepts of ObjectStores, Indexes,

Cursors–Most APIs were synchronous– Async models – function callbacks– No SQL

• Mozilla, Microsoft Bless youngling– Implemented in Chrome 12, Firefox 4.0,

IE10

• Simple implementation for browsers– Basic concepts like transactions– Async and Sync APIs– Libraries to enhance capabilities

… the force is strong with this one.…

IndexedDB Example

http://yourwebpage.com search

Database

Cursor on Object Store

Object Storekey : valuekey : valuekey : value

Index

Cursor on Index

Database

Cursor on Object Store

Object Storekey : valuekey : valuekey : value

Index

Cursor on Index

... IndexedDB refresher...

Demo time

Show me

http://nparashuram.com/IndexedDB

• Specification still evolving– setVersion vs onupgradeneeded– IDBTransaction.READ_ONLY vs

“readonly”–Mostly done, now the browsers need to

catch up

• No SQL• Verbose syntax – requests vs

promises

… what a piece of junk! …

… the alliance …

• https://github.com/axemclion/jquery-indexeddb

• http://linq2indexeddb.codeplex.com/• https://github.com/superfeedr/

indexeddb-backbonejs-adapter• https://github.com/philikon/

queryIndexedDB• http://gazeljs.org/• http://aaronpowell.github.com/db.js/

… for the rest of us …

… for the rest of us …

Cross Browser Support ? Deploy to production ?

... The grand plan …

- IndexedDB Shim over WebSql- http://nparashuram.com/IndexedDB/polyfill

- WebSql shims over Flash, etc.

- Or use the libraries

… The grand plan …

… the alliance …

… the alliance …• Lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• Lscache• Kizzy• Artemia• microcache.js• Store.js

• Impact of ECMA.Next– IndexedDB module – Promises– Iterators, Generators, Yield support– Save binary blobs– De-structuring assignments [x,y] = [1,2]– Classes as Object Schema

… always in motion is the future …

May the force be with you

@http://nparashuram.com

http://nparashuram.com/IndexedDB