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

Recent Posts

JMeter Postprocessor JSON parsing

Stop a java process in windows

Logstash truncate long message

React Router Example

Custom Node Red Dashboard UI Part 2

Categories

Cocos2D-X

Java

Javascript

JSF

Libgdx

News

PHP

Uncategorized

Yii