HTML5 IndexedDB tutorial

This post will be an example rather than tutorial. I don’t know why but it seems people just can’t post simple examples or w3 can’t update their site for the simplest api.


window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

const dbName = "testDB";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
    console.log("db error");
};

request.onupgradeneeded = function(event) {
    var db = event.target.result;

    var productObjectStore = db.createObjectStore("products", { keyPath: "productNumber" });
    
    productObjectStore.createIndex("name", "name", { unique: true });
    
    persistProducts();
    
    console.log("db created");
    
  };

function persistProducts(){
	
	var request = indexedDB.open(dbName, 2);
	request.onsuccess = function(event) {
	    
		var db = event.target.result;

		var transaction = db.transaction("products", "readwrite");
		
		var objectStore = transaction.objectStore("products");
		
		var data = [{productNumber:1,name:"product1",price:33.22}];
		
		data.forEach( function (product)
		{
			objectStore.put(product);
		});
		
		transaction.oncomplete = function() {
			console.log("products saved");
		};
		
	};
}

function getProductByKey(key) {
	
	var request = indexedDB.open(dbName);
	
	request.onsuccess = function(event) {

	    var db = event.target.result;

	    var transaction = db.transaction("products", "readonly");
	    var objectStore = transaction.objectStore("products");
	    
	    var query = objectStore.get(key);
	    
	    query.onerror = function(queryEvent) {
          console.log("Unable to retrieve data from database!");
        };
        
        query.onsuccess = function(queryEvent) {
        	
        	console.log(queryEvent.target.result);
        	var product1 = queryEvent.target.result;

			// do stuff with the product
			// provide a callback parameter to execute here
        	
        };
	};
}

function getProductByName(name) {
	
	var request = indexedDB.open(dbName);
	
	request.onsuccess = function(event) {

	    var db = event.target.result;

	    var transaction = db.transaction("products", "readonly");
	    var objectStore = transaction.objectStore("products");
		var index = objectStore.index('name');
	    
	    var query = index.get(name);
	    
	    query.onerror = function(queryEvent) {
          console.log("Unable to retrieve data from database!");
        };
        
        query.onsuccess = function(queryEvent) {
        	
        	console.log(queryEvent.target.result);
        	var product1 = queryEvent.target.result;

			// do stuff with the product
			// provide a callback parameter to execute here
        	
        };
	};
}

function deletedb(){

	var req = indexedDB.deleteDatabase(dbName);
	console.log("db deleted");
	
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

if (!window.indexedDB) {

window.alert("Your browser doesn't support a stable version of IndexedDB.")

}

const dbName = "testDB";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {

console.log("db error");

};

request.onupgradeneeded = function(event) {

var db = event.target.result;

var productObjectStore = db.createObjectStore("products", { keyPath: "productNumber" });

productObjectStore.createIndex("name", "name", { unique: true });

persistProducts();

console.log("db created");

};

function persistProducts(){

var request = indexedDB.open(dbName, 2);

request.onsuccess = function(event) {

var db = event.target.result;

var transaction = db.transaction("products", "readwrite");

var objectStore = transaction.objectStore("products");

var data = [{productNumber:1,name:"product1",price:33.22}];

data.forEach( function (product)

{

objectStore.put(product);

});

transaction.oncomplete = function() {

console.log("products saved");

};

}

function getProductByKey(key) {

var request = indexedDB.open(dbName);

request.onsuccess = function(event) {

var db = event.target.result;

var transaction = db.transaction("products", "readonly");

var objectStore = transaction.objectStore("products");

var query = objectStore.get(key);

query.onerror = function(queryEvent) {

console.log("Unable to retrieve data from database!");

};

query.onsuccess = function(queryEvent) {

console.log(queryEvent.target.result);

var product1 = queryEvent.target.result;

// do stuff with the product

// provide a callback parameter to execute here

};

}

function getProductByName(name) {

var request = indexedDB.open(dbName);

request.onsuccess = function(event) {

var db = event.target.result;

var transaction = db.transaction("products", "readonly");

var objectStore = transaction.objectStore("products");

var index = objectStore.index('name');

var query = index.get(name);

query.onerror = function(queryEvent) {

console.log("Unable to retrieve data from database!");

};

query.onsuccess = function(queryEvent) {

console.log(queryEvent.target.result);

var product1 = queryEvent.target.result;

// do stuff with the product

// provide a callback parameter to execute here

};

}

function deletedb(){

var req = indexedDB.deleteDatabase(dbName);

console.log("db deleted");

}

Usage

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> <p><button onclick="deletedb()">DBDelete</button></p> <p><button onclick="getProductByKey(1)">GetProduct By Key</button></p> <p><button onclick="getProductByName('product1')">GetProduct By Name</button></p> <script src="index.js"></script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>

<p><button onclick="deletedb()">DBDelete</button></p>
<p><button onclick="getProductByKey(1)">GetProduct By Key</button></p>
<p><button onclick="getProductByName('product1')">GetProduct By Name</button></p>

<script src="index.js"></script>
</body>

</html>

This entry was posted in Javascript and tagged on June 23, 2016

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Recent Posts

Logstash replace null values

Spring JPA Insert Update Batch

JMeter Maven Plugin Pass Parameters

DB2 JDBC Insert Update Batch

HTML5 IndexedDB tutorial

Recent Comments
metin on Java Pos Thermal Printer Example
metin on Java Pos Thermal Printer Example
Bob on Java Pos Thermal Printer Example
Bob on Java Pos Thermal Printer Example
Nabeel Ahmed on Java Pos Thermal Printer Example

Categories

Cocos2D-X

Java

Javascript

JSF

Libgdx

News

PHP

Uncategorized

Yii