https://github.com/cfjedimaster/indexeddb-preso
IndexedDB is an API for client-side storage of significant amounts of structured data and for high performance searches on this data using indexes.
Credit: Mozilla Developer Network.
Expect to be able to save a reasonable amount of data, but also expect the user to know you are storing this data.
Every HTTP request means more data going over the pipe. If you can send it once, why not?
Image credit: longlong240
Image credit: Parclytaxel
Image credit: Joe Buckingham
Thought credit: Christian Heilmann
document.addEventListener("DOMContentLoaded", function(){
if("indexedDB" in window) {
console.log("YES!!! I CAN DO IT!!! WOOT!!!");
} else {
console.log("I has a sad.");
}
},false);
test1.html
var openRequest = indexedDB.open("test",1);
var openRequest = indexedDB.open("test",1);
var db;
openRequest.onupgradeneeded = function(e) {
console.log("running onupgradeneeded");
}
openRequest.onsuccess = function(e) {
console.log("running onsuccess");
db = e.target.result;
}
test2.html
request to open the database
If the request fired an upgrade needed event, create object stores
If the request fired a done event, I'm ready to roll
test3.html
Now let's add some stuff!
test4.html
thisDb.createObjectStore("test", { keyPath: "email" });
thisDb.createObjectStore("test2", { autoIncrement: true });
test5.html
var transaction = db.transaction(["test"], "readonly");
var objectStore = transaction.objectStore("test");
var ob = objectStore.get(x);
ob.onsuccess = function(e) {
}
db.transaction(["test"], "readonly").objectStore("test").get(X).onsuccess = function(e) {
}
test6.html
var transaction = db.transaction(["test"], "readonly");
var objectStore = transaction.objectStore("test");
var cursor = objectStore.openCursor();
cursor.onsuccess = function(e) {
var res = e.target.result;
if(res) {
//stuff
res.continue();
}
}
test7.html
var objectStore = thisDb.createObjectStore("test",
{ autoIncrement:true });
//first arg is name of index, second is the path (col);
objectStore.createIndex("name","name", {unique:false});
objectStore.createIndex("email","email", {unique:true});
test8.html
//Taken from MDN
// Match anything past "Bill", including "Bill"
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
// Match anything past "Bill", but don't include "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
// Match anything up to, but not including, "Donna"
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
//Match anything between "Bill" and "Donna", but not including "Donna"
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
test9.html
objectStore.openCursor(range, IDBCursor.PREV);
objectStore.openCursor(range, IDBCursor.PREV_NO_DUPLICATE);
var person = {name:"Raymond", email:"foo@foo.com",
tags:["ajax","mashup","html5","jquery","cats"]};
test10.html