client storage
DESCRIPTION
An introduction to WebSQL and IndexedDB with libraries and if they can be used today - star wars style. Session at HTML5Dev Conference - http://html5devconf.com/TRANSCRIPT
![Page 1: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/1.jpg)
Client Side StorageStar wars
style
WebSQL and IndexedDB
![Page 2: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/2.jpg)
Long time ago, in a galaxy far far away …
![Page 3: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/3.jpg)
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
![Page 4: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/4.jpg)
• 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 …
![Page 5: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/5.jpg)
... 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)
![Page 6: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/6.jpg)
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’;
![Page 7: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/7.jpg)
... an apprentice to a master ...
![Page 8: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/8.jpg)
... 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”
![Page 9: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/9.jpg)
... Denying the destiny ...
![Page 10: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/10.jpg)
... Denying the destiny ...
![Page 11: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/11.jpg)
Come over to the dark side*
![Page 12: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/12.jpg)
… 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
![Page 13: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/13.jpg)
• 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.…
![Page 14: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/14.jpg)
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...
![Page 15: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/15.jpg)
Demo time
Show me
http://nparashuram.com/IndexedDB
![Page 16: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/16.jpg)
• 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! …
![Page 17: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/17.jpg)
… 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/
![Page 18: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/18.jpg)
… for the rest of us …
![Page 19: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/19.jpg)
… for the rest of us …
Cross Browser Support ? Deploy to production ?
![Page 20: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/20.jpg)
... The grand plan …
![Page 21: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/21.jpg)
- IndexedDB Shim over WebSql- http://nparashuram.com/IndexedDB/polyfill
- WebSql shims over Flash, etc.
- Or use the libraries
… The grand plan …
![Page 22: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/22.jpg)
… the alliance …
![Page 23: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/23.jpg)
… 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
![Page 24: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/24.jpg)
• 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 …
![Page 25: Client storage](https://reader034.vdocument.in/reader034/viewer/2022050918/540d4dfa8d7f72767e8b48e5/html5/thumbnails/25.jpg)
May the force be with you
@http://nparashuram.com
http://nparashuram.com/IndexedDB