Mets-blog

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

Logstash truncate long message

React Router Example

Custom Node Red Dashboard UI Part 2

Custom Node Red Dashboard UI Part 1

Logstash replace null values

Recent Comments
Sachin Pk on Java Pos Thermal Printer Example
suresh on Java Pos Thermal Printer Example
PaK on Java Pos Thermal Printer Example
Google on Yii register User with Email
Sawlye on Java Pos Thermal Printer Example
Categories

Cocos2D-X

Java

Javascript

JSF

Libgdx

News

PHP

Uncategorized

Yii

Mets Blog

Mets Blog

HTML5 IndexedDB tutorial