Created
February 24, 2016 06:30
-
-
Save kkasaei/b6f3551d680a94a0ef9f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Index DB DEMO</title> | |
| <!-- https://code.tutsplus.com/tutorials/working-with-indexeddb--net-34673--> | |
| </head> | |
| <body> | |
| <script> | |
| var db; | |
| var dbVersion = 1; | |
| function indexedDBOk() { | |
| return "indexedDB" in window; | |
| } | |
| document.addEventListener("DOMContentLoaded", function() { | |
| //No support? Go in the corner and pout. | |
| if(!indexedDBOk) return; | |
| var openRequest = indexedDB.open("idarticle_people",dbVersion); | |
| openRequest.onupgradeneeded = function(e) { | |
| var thisDB = e.target.result; | |
| if(!thisDB.objectStoreNames.contains("people")) { | |
| thisDB.createObjectStore("people", {autoIncrement:true}); | |
| } | |
| }; | |
| openRequest.onsuccess = function(e) { | |
| console.log("running onsuccess"); | |
| db = e.target.result; | |
| //Listen for add clicks | |
| document.querySelector("#addButton").addEventListener("click", addPerson, false); | |
| }; | |
| openRequest.onerror = function(e) { | |
| //Do something for the error | |
| } | |
| },false); | |
| function addPerson(e) { | |
| var name = document.querySelector("#name").value; | |
| var email = document.querySelector("#email").value; | |
| console.log("About to add "+name+"/"+email); | |
| var transaction = db.transaction(["people"],"readwrite"); | |
| var store = transaction.objectStore("people"); | |
| //Define a person | |
| var person = { | |
| name:name, | |
| email:email, | |
| created:new Date() | |
| }; | |
| //Perform the add | |
| var request = store.add(person,dbVersion); | |
| dbVersion++; | |
| request.onerror = function(e) { | |
| console.log("Error",e.target.error.name); | |
| //some type of error handler | |
| }; | |
| request.onsuccess = function(e) { | |
| console.log("Woot! Did it"); | |
| } | |
| } | |
| function getPerson(e) { | |
| var key = 1; | |
| if(key === "" || isNaN(key)) return; | |
| var transaction = db.transaction(["people"],"readonly"); | |
| var store = transaction.objectStore("people"); | |
| var request = store.get(Number(key)); | |
| request.onsuccess = function(e) { | |
| var result = e.target.result; | |
| console.dir(result); | |
| if(result) { | |
| var s = "<h2>Key "+key+"</h2><p>"; | |
| for(var field in result) { | |
| s+= field+"="+result[field]+"<br/>"; | |
| } | |
| document.querySelector("#status").innerHTML = s; | |
| } else { | |
| document.querySelector("#status").innerHTML = "<h2>No match</h2>"; | |
| } | |
| } | |
| } | |
| function getAll(e) { | |
| var s = ""; | |
| db.transaction(["people"], "readonly").objectStore("people").openCursor().onsuccess = function(e) { | |
| var cursor = e.target.result; | |
| if(cursor) { | |
| s += "<h2>Key "+cursor.key+"</h2><p>"; | |
| for(var field in cursor.value) { | |
| s+= field+"="+cursor.value[field]+"<br/>"; | |
| } | |
| s+="</p>"; | |
| cursor.continue(); | |
| } | |
| document.querySelector("#status").innerHTML = s; | |
| } | |
| } | |
| </script> | |
| <input type="text" id="name" placeholder="Name"><br/> | |
| <input type="email" id="email" placeholder="Email"><br/> | |
| <button id="addButton">Add Data</button> | |
| <button id="getPerson" onclick="getPerson(event)">get Person</button> | |
| <button id="getAll" onclick="getAll(event)">get All</button> | |
| <div id="status"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A Sample Index DB exercise base on Tuts+ article : https://code.tutsplus.com/tutorials/working-with-indexeddb--net-34673