![Page 1: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/1.jpg)
Storing data in the mobile browser
Andy Gup
![Page 2: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/2.jpg)
Why a,end this demo theater?
Have storage needs > 5MBs
Want to store data types other than Strings
Don’t want to manually serialize/deserialize
Looking into offline JavaScript
![Page 3: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/3.jpg)
Advanced browser storage Coding pa,erns Use Cases
![Page 4: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/4.jpg)
Common quesLons… Can I store more than 5MBs? Yes! How much data can I store? It varies!
![Page 5: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/5.jpg)
What type of data??
JSON Objects (not serialized) Complex Objects (difficult serialize/deserialize) Binary data (e.g. images, files) Arrays
![Page 6: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/6.jpg)
Demo
Github.com/esri/offline-‐editor-‐js
![Page 7: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/7.jpg)
Tell me how?? IndexedDB -‐ naLve ApplicaLonCache – naLve (HTML, CSS, JavaScript) WebSQL – naLve LocalForage (Mozilla. LocalStorage fallback) PouchDB (JS CouchDB + remote sync)
![Page 8: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/8.jpg)
Polyfill? Exposes IndexedDB API on Web SQL browsers h,ps://github.com/axemclion/IndexedDBShim
![Page 9: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/9.jpg)
Caniuse.com
![Page 10: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/10.jpg)
How does IndexedDB work? Key-‐Value pairs Search Indexes NoSQL Cursors Asynchronous via callbacks NoLficaLons via DOM events
![Page 11: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/11.jpg)
Key/Value pairs? Key String, Number, Date, Array
Value (parLal list) String Object
Array Blob ArrayBuffer UintArray File
![Page 12: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/12.jpg)
How to use? IndexedDBShim.js Required for Safari 7 on iOS and Mac Safari 7 only comes with Web SQL <script src=“IndexedDBShim.js"></script>
![Page 13: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/13.jpg)
How to use? Set Prefixes window.indexedDB = window.indexedDB ||
window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var transaction = window.IDBTransaction || window.webkitIDBTransaction;
![Page 14: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/14.jpg)
How to use? Validate funcLonality this.isSupported = function(callback){
if(!window.indexedDB && !window.openDatabase){ return callback(false); } else{
testFunctionality(function(success,result){ return callback(success,result); });
}};
![Page 15: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/15.jpg)
How to use? Open database var db = null;
var request = indexedDB.open(“customerDB”, /*version*/ 2);
request.onsuccess = function(event){db = event.target.result;
callback(true); }
request.onerror = function(error){callback(false,error);
}
STEP 1
STEP 2
![Page 16: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/16.jpg)
How to use? TransacLon requests var transaction =
db.transaction(["customerDB"], "readwrite");
var objectStore = transaction.objectStore(“customerDB”);
var request = objectStore.put({test:1},”myKey”);
// Did transaction request work or not?request.onerror = function(error){ . . . }request.onsuccess = function(event){ . . . }
STEP 1
STEP 2
STEP 3
STEP 4
![Page 17: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/17.jpg)
How to use? Write data
add(anyValue, /*optional*/ key) Write only unique values Duplicate entries fail with error
put(anyValue, /*optional*/ key)Overwrites exisLng entries with same key
![Page 18: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/18.jpg)
How to use? Write data
request = objectStore.put({test:1},”myKey”);
request.onsuccess = function(event){callback(true,event.target.result);
}
request.onerror = function(error){callback(false,error);
}
![Page 19: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/19.jpg)
How to use? Get data
request = objectStore.get(“aUniqueKey”);
request.onsuccess = function(event){callback(true,event.target.result);
}
request.onerror = function(error){callback(false,error);
}
![Page 20: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/20.jpg)
Will IndexedDB work offline?
YES! Can also be used with ApplicaLon Cache.
![Page 21: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/21.jpg)
Database size – how big?? General suggesLon (smartphones/tablet): -‐ Less than 100 MB Why? Depends on: -‐ Remaining free memory -‐ How much memory used by browser -‐ How many tabs are already open -‐ If other applicaLons already running
![Page 22: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/22.jpg)
Can I use too much memory?
YES! The device OS will shutdown the browser Greater potenLal for data corrupLon/loss • If shutdown occurs during a ‘write’ operaLon
![Page 23: Storing datainthe( mobile - Esri · Title: IndexedDB: Taking Browser Storage to the Next Level Author: Esri Subject: 2015 Esri International Developer Summit--Presentation Keywords](https://reader031.vdocument.in/reader031/viewer/2022013022/5f7fd2a3bc8fa2188e462930/html5/thumbnails/23.jpg)
Andy Gup, Esri Developer Evangelist h,p://www.andygup.net [email protected] @agup