Client storage
Download as PPTX, PDF•2 likes•2,755 views
The document discusses client-side storage technologies, particularly WebSQL and IndexedDB, highlighting their features, capabilities, and the evolution of these APIs. It covers the history of storage methods like cookies, local/session storage, and various database modules, detailing their syntactic similarities to SQL and their implementations across browsers. Additionally, it mentions libraries that enhance IndexedDB and the impact of future ECMAScript developments on storage solutions.
![… always in motion is the future …
• 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](https://image.slidesharecdn.com/clientstorage-120521212352-phpapp02/85/Client-storage-24-320.jpg)
Client storage
- 1. Client Side Storage Star wars style WebSQL and IndexedDB
- 2. Long time ago, in a galaxy far far away …
- 4. … days of the old republic … • 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
- 5. ... 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)
- 6. ... WebSql refresher... IndexedDB Example http://yourwebpage.com search Database Database Transactions Transactions Create table bookShop (key varchar(255), value varchar(255)) Insert into bookShop values (“name”, “desc”) Drop table bookShop SQLite Dialect Select * from bookShop where name = „name‟;
- 7. ... an apprentice to a master ...
- 8. ... 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”
- 9. ... Denying the destiny ...
- 10. ... Denying the destiny ...
- 11. Come over to the dark side*
- 12. … 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
- 13. … the force is strong with this one.… • 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
- 14. ... IndexedDB refresher... IndexedDB Example http://yourwebpage.com search Database Database Object Store Object Store key : value Index key : value Index key : value key : value Cursor on Cursor on key : value Index key : value Index Cursor on Cursor on Object Store Object Store
- 15. Demo time
- 16. … what a piece of junk! … • 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
- 17. … the alliance … • https://github.com/axemclion/jquery- indexeddb • http://linq2indexeddb.codeplex.com/ • https://github.com/superfeedr/indexeddb- backbonejs-adapter • https://github.com/philikon/queryIndexedD B • http://gazeljs.org/ • http://aaronpowell.github.com/db.js/
- 18. … for the rest of us …
- 19. … for the rest of us …
- 20. ... The grand plan …
- 21. … The grand plan … - IndexedDB Shim over WebSql - http://nparashuram.com/IndexedDB/polyfill - WebSql shims over Flash, etc. - Or use the libraries
- 22. … the alliance …
- 23. … 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
- 24. … always in motion is the future … • 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
- 25. http://nparashuram.com/IndexedDB May the force be with you @ http://nparashuram.com