HTML5 JavaScript Storage for Structured Data

  • Published on
    22-Mar-2016

  • View
    79

  • Download
    0

DESCRIPTION

HTML5 JavaScript Storage for Structured Data. Andy Gup, Esri www.andygup.net @ agup. IndexedDB and the mobile web. Why attend this session?. Have storage needs > 5MBs Want to store data types other than Strings Dont want to manually serialize / deserialize - PowerPoint PPT Presentation

Transcript

HTML5 JavaScript Storage for Structured Data

HTML5 JavaScript Storage forStructured DataAndy Gup, Esriwww.andygup.net@agup

http://www.w3.org/TR/IndexedDB/1IndexedDBand themobile webWhy attend this session?Have storage needs > 5MBs

Want to store data types other than Strings

Dont want to manually serialize/deserialize

Looking into offline JavaScriptAgendaIntro to IndexedDB coding patterns

Fitting IndexedDB into overall application

Performance

Wet your appetite! Cant cover it all

Who am I?Andy Gup, Esri Sr. Developer JS and native Android

www.andygup.netgithub.com/andygup agup@esri.com@agup

Structured data?JSON Objects (not serialized)

Complex Objects (difficult serialize/deserialize)

Binary data (e.g. images, files)

Arrays

Nested objects6

Offline JavaScript DemoIndexedDB browser support?

Source: Caniuse.com8IndexedDB browser support?

Source: Caniuse.com9How does IndexedDB work?Key-Value pairsSearch IndexesNoSQL CursorsAsynchronous via callbacksNotifications via DOM events

Much more than localStorage and simple key value pairs. It uses queries on an index that produce a cursor, which you use to iterate across the result set.http://stackoverflow.com/questions/16501459/javascript-searching-indexeddb-using-multiple-indexes

10Key/Value pairs?KeyString, Number, Date, Array

Value (partial list)StringObjectArrayBlobArrayBufferUint8ArrayFile

It uses queries on an index that produce a cursor, which you use to iterate across the result set.https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithmhttp://www.w3.org/TR/IndexedDB/#key-construct

11Will IndexedDB work offline?YES!

Can also be used with Application Cache.It uses queries on an index that produce a cursor, which you use to iterate across the result set.

12How to use? Six basic steps Include shim (if necessary)Set vendor prefixesValidate functionalityOpen (or upgrade)Add, update, retrieve or delete dataCapture events via callbacks

13How to use? IndexedDBShim.jsRequired for Safari 7 on iOS and MacSafari 7 only comes with Web SQL

Recommended

View more >