Add IndexedDB API Sample

mozillakr · Aug 16, 2013 · b72c626 · b72c626
1 parent 5b9f38d
commit b72c626
Show file tree

Hide file tree

Showing 3 changed files with 242 additions and 0 deletions.
diff --git a/IndexedDB/index.html b/IndexedDB/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    	<title>IndexedDB API Sample</title>
+    	<meta charset="utf-8">
+    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <script type="text/javascript" src="js/app.js"></script>
+        <script type="text/javascript">
+			window.onload = function(){
+				app.createStore();
+			}
+        </script>
+    </head>
+    <body>
+        <h1>IndexedDB API Sample</h1>
+
+        <p>
+			<button onclick="app.initDB()">Init DB</button>
+			<br />
+
+			<button onclick="app.testWrite()">Add Hanna</button>
+			<br />
+
+			<button onclick="app.testRemove()">Remove Hanna</button>
+			<br />
+
+			<button onclick="app.testRead()">Get 555-55-5555</button>
+			<br />
+
+			<button onclick="app.findValueWithIndex()">Get Donna's SSN</button>
+			<br />
+
+			<button onclick="app.testGetAllWithCursor()">Get All Using Cursor</button>
+			<br />
+
+			<button onclick="app.testGetAllWithIndexCursor()">Get All Using Index-Cursor</button>
+			<br />
+
+			<button onclick="app.testGetAllWithIndexKeyCursor()">Get All Using Index-KeyCursor</button>
+			<br />
+
+			<button onclick="app.testClear(true)">Clear DB</button>
+			<br />
+		</p>
+    </body>
+</html>
diff --git a/IndexedDB/js/app.js b/IndexedDB/js/app.js
@@ -0,0 +1,182 @@
+var app = function(){
+	var db;
+
+	const customerData = [
+	  { ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]" },
+	  { ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
+	];
+	return {
+		createStore: function(){
+			var request = indexedDB.open("MyTestDatabase", 1);
+			request.onerror = function(event) {
+			  alert("Why didn't you allow my web app to use IndexedDB?!");
+			};
+			request.onsuccess = function(event) {
+				db = request.result;
+				console.log("IndexedDB Opened.");
+			};
+
+			request.onupgradeneeded = function(event) {
+			  var db = event.target.result;
+
+			  // Create an objectStore to hold information about our customers. We're
+			  // going to use "ssn" as our key path because it's guaranteed to be
+			  // unique.
+			  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+			  // Create an index to search customers by name. We may have duplicates
+			  // so we can't use a unique index.
+			  objectStore.createIndex("name", "name", { unique: false });
+
+			  // Create an index to search customers by email. We want to ensure that
+			  // no two customers have the same email, so use a unique index.
+			  objectStore.createIndex("email", "email", { unique: true });
+
+			  // Store values in the newly created objectStore.
+			  for (var i in customerData) {
+				objectStore.add(customerData[i]);
+			  }
+			};
+		},
+
+		initDB: function() {
+			app.testClear(false);
+
+			var transaction = db.transaction(["customers"], "readwrite");
+
+			transaction.oncomplete = function(event) {
+			  alert("Init Done.");
+			};
+
+			transaction.onerror = function(event) {
+				alert("Failed.");
+			};
+
+			var objectStore = transaction.objectStore("customers");
+
+			for (var i in customerData) {
+				var req = objectStore.add(customerData[i]);
+				req.onsuccess = function(event) {
+				// event.target.result == customerData[i].ssn;
+				};
+			};
+		},
+
+		testWrite: function (){
+			var transaction = db.transaction(["customers"], "readwrite");
+
+			transaction.oncomplete = function(event) {
+			  alert("Done.");
+			};
+
+			transaction.onerror = function(event) {
+				alert("Failed.");
+			};
+
+			var objectStore = transaction.objectStore("customers");
+			var newCustomers = [
+				{ ssn: "666-66-6666", name: "Hanna", age: 32, email: "[email protected]" }
+			];
+
+			for (var i in newCustomers) {
+				var request = objectStore.add(newCustomers[i]);
+				request.onsuccess = function(event) {
+				// event.target.result == customerData[i].ssn;
+				};
+			};
+		},
+
+		testRemove: function (){
+			console.log("testRemove() called");
+
+			var request = db.transaction(["customers"], "readwrite")
+							.objectStore("customers")
+							.delete("666-66-6666");
+			request.onsuccess = function(event) {
+				alert("Removed.");
+			};
+			request.onerror = function(event) {
+			  alert("Failed.");
+			};
+		},
+
+		testRead: function (){
+			var transaction = db.transaction(["customers"]);
+			var objectStore = transaction.objectStore("customers");
+			var request = objectStore.get("555-55-5555");
+			request.onerror = function(event) {
+			  // Handle errors!
+			};
+			request.onsuccess = function(event) {
+			  // Do something with the request.result!
+			  alert("Name for SSN 555-55-5555 is " + request.result.name);
+			};
+		},
+
+		testGetAllWithCursor: function (){
+			var objectStore = db.transaction("customers").objectStore("customers");
+
+			objectStore.openCursor().onsuccess = function(event) {
+			  var cursor = event.target.result;
+			  if (cursor) {
+				alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+				cursor.continue();
+			  }
+			  else {
+				alert("No more entries!");
+			  }
+			};
+		},
+
+		findValueWithIndex: function() {
+			var objectStore = db.transaction("customers").objectStore("customers");
+
+			var index = objectStore.index("name");
+			index.get("Donna").onsuccess = function(event) {
+			  alert("Donna's SSN is " + event.target.result.ssn);
+			};
+		},
+
+		testGetAllWithIndexCursor: function() {
+			var objectStore = db.transaction("customers").objectStore("customers");
+
+			var index = objectStore.index("name");
+			index.openCursor().onsuccess = function(event) {
+			  var cursor = event.target.result;
+			  if (cursor) {
+				// cursor.key is a name, like "Bill", and cursor.value is the whole object.
+				alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+				cursor.continue();
+			  }
+			};
+		},
+
+		testGetAllWithIndexKeyCursor: function() {
+			var objectStore = db.transaction("customers").objectStore("customers");
+
+			var index = objectStore.index("name");
+			index.openKeyCursor().onsuccess = function(event) {
+			  var cursor = event.target.result;
+			  if (cursor) {
+				// cursor.key is a name, like "Bill", and cursor.value is the SSN.
+				// No way to directly get the rest of the stored object.
+				alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+				cursor.continue();
+			  }
+			};
+		},
+
+		testClear: function (showAlert){
+			var objectStore = db.transaction("customers", "readwrite").objectStore("customers");
+			var req = objectStore.clear();
+			req.onsuccess = function(evt) {
+			  if (showAlert == true) alert("Store cleared");
+			};
+			req.onerror = function (evt) {
+			  if (showAlert == true) alert("clearObjectStore:", evt.target.errorCode);
+			};
+		}
+	} //-- return
+}();
+
+window.$ = app.$;
diff --git a/IndexedDB/manifest.webapp b/IndexedDB/manifest.webapp
@@ -0,0 +1,14 @@
+{
+  "version": "0.1",
+  "name": "IndexedDB",
+  "description": "IndexedDB API Sample App",
+  "launch_path": "/index.html",
+  "icons": {
+    "16": "/img/icons/icon-16.png",
+    "48": "/img/icons/icon-48.png",
+    "128": "/img/icons/icon-128.png"
+  },
+  "installs_allowed_from": ["*"],
+  "appcache_path": "/cache.manifest",
+  "default_locale": "en"
+}