Skip to content

Instantly share code, notes, and snippets.

@greenido

greenido/notes-IndexedDB.html

Forked from cfjedimaster/gist:2499973
Created September 23, 2012 09:37
Show Gist options
  • Save greenido/3769507 to your computer and use it in GitHub Desktop.
Save greenido/3769507 to your computer and use it in GitHub Desktop.
Download ZIP
Simple indexedDB example that will work both in Chrome and FF
Raw
notes-IndexedDB.html
<!DOCTYPE html>
<head>
<script>
var db;
// until we won't need this prefix mess
var indexedDB = window.indexedDB || window.webkitIndexedDB
|| window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction;
// The initialization of our stuff
function init() {
var dbVersion = 1.0;
var openRequest = indexedDB.open("notesDB", dbVersion);
//handle setup - as the spec like it
openRequest.onupgradeneeded = function(e) {
console.log("running onupgradeneeded");
var thisDb = e.target.result;
//temp delete if we want to start clean ->
//thisDb.deleteObjectStore("note");
//Create Note
if(!thisDb.objectStoreNames.contains("note")) {
console.log("I need to make the note objectstore");
var objectStore = thisDb.createObjectStore("note",
{ keyPath: "id", autoIncrement:true });
objectStore.createIndex("title", "title",
{ unique: false });
}
}
openRequest.onsuccess = function(e) {
db = e.target.result;
db.onerror = function(event) {
// Generic error handler for all
// errors targeted at this database
alert("Database error: " + event.target.errorCode);
console.dir(event.target);
};
// Interim solution for Chrome to create an objectStore.
// Will be deprecated once it's fixed.
if (db.setVersion) {
console.log("in old setVersion: "+ db.setVersion);
if (db.version != dbVersion) {
var req = db.setVersion(dbVersion);
req.onsuccess = function () {
var ob = db.createObjectStore("note",
{ keyPath: "id", autoIncrement:true });
ob.createIndex("title",
"title", { unique: false });
var trans = req.result;
trans.oncomplete = function(e) {
console.log("== trans oncomplete ==");
displayNotes();
}
};
}
else {
displayNotes();
}
}
else {
displayNotes();
}
}
function displayNotes() {
console.log("TODO - print something nice on the page");
}
//TEMP TO REMOVE
document.querySelector("#test").addEventListener("click", function() {
var transaction = db.transaction(["note"], "readwrite");
transaction.oncomplete = function(event) {
console.log("All done!");
};
transaction.onerror = function(event) {
// Don't forget to handle errors!
console.dir(event);
};
var objectStore = transaction.objectStore("note");
//use put versus add to always write, even if exists
var request = objectStore.add( {title:"note 1",
body:"this is the body " +
Math.floor(Math.random()*1000) });
request.onsuccess = function(event) {
console.log("done with insert");
};
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log(cursor.key);
console.dir(cursor.value);
cursor.continue();
}
else {
console.log("Done with cursor");
}
};
});
}
</script>
</head>
<body onload="init()">
<h1>IndexedDB simplest example</h1>
<p>
<button id="test">Simple Notes in IndexedDB</button>
Have fun and be strong...
</p>
</body>
</html>
@hosseinGanjyar
Copy link

hosseinGanjyar commented Feb 19, 2017 •
edited
Loading

I tried to change code for insert 100,000 records:

//use put versus add to always write, even if exists
for(var i=0; i<100000 ; i++){
       var request = objectStore.add( {title:"note 1",
       body:"this is the body " + 
       Math.floor(Math.random()*1000) });
}

But there is a problem: Increased very very much memory....Why?!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment