techforum-repo · January 20, 2022 22:33
diff --git a/indexeddb.html b/indexeddb.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 	<head>
 		<title>Browser Storage Demos - IndexDB API </title>		
 		
 		
 		<script type = "text/javascript">
 		
 			//Check for browser support
 			if (window.indexedDB) {		    
 			
 				//Sample data
 				const customerData = [{ ssn: "444-44-4444", name: "test1", age: 35, email: "[email protected]" },
 									  { ssn: "555-55-5555", name: "test2", age: 32, email: "[email protected]" }];
 				const dbName = "testDB";
 				var db;
 				//open the db, the db is created if not exist already
 				//Specify DB name and version, update the version number if the DB structure need to be modified
 				var request = indexedDB.open(dbName, 2);

 				//Error Handler
 				request.onerror = function(event) {
 					console.log("error: ");
 				};
 				
 				//Success Handler
 				request.onsuccess = function(event) {
 					db = request.result;
 					console.log("success: "+ db);
 				};

 				//Handler invoked on successful opening of database
 				//Upgrade the existing DB object if the version is different or create the objects
 				request.onupgradeneeded = function(event) {
 					var db = event.target.result;

 					// autoIncrement: true
 					//Create Object store with primary key
 					var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
 					
 					//Define the required Indexes
 					objectStore.createIndex("name", "name", { unique: false });
 					objectStore.createIndex("email", "email", { unique: true });
 					
 					//Add data to the object
 					customerData.forEach(function(customer) {
 							objectStore.add(customer);
 					});
 					
 				};
 				
 				function add() {
 				
 					//Retrieve the transaction for specific object, specify the mode - readonly, readwrite and versionchange
 					var transaction = db.transaction(["customers"], "readwrite");
 					
 					// Handler Invoked when all the data is added to the database.
 					transaction.oncomplete = function(event) {
 						console.log("Add Completed!");
 					};

 					//Error Handler
 					transaction.onerror = function(event) {
 						
 					};
 					
 					const customerDataNew = [{ ssn: "777-77-7777", name: "Test3", age: 32, email: "[email protected]" }];
 					
 					//Add new customer data to the store
 					var objectStore = transaction.objectStore("customers");
 					customerDataNew.forEach(function(customer) {
 						var request = objectStore.add(customer);
 						request.onsuccess = function(event) {
 							console.log("Data Added..."+event.target.result);
 						};
 					});
 				}
 				
 				
 				//Delete data from the store through primary key and delete method
 				function deleteData()
 				{
 					var request = db.transaction(["customers"], "readwrite")
 									.objectStore("customers")
 									.delete("777-77-7777");
 					request.onsuccess = function(event) {
 					console.log("Record Deleted!");
 					};
 				}
 				
 				//Read data from the store through primary key and get method
 				function read()
 				{
 					var transaction = db.transaction(["customers"]);
 					var objectStore = transaction.objectStore("customers");
 					var request = objectStore.get("444-44-4444");
 					request.onerror = function(event) {
 						// Handle errors!
 					};
 					request.onsuccess = function(event) {
 						document.getElementById("data").innerHTML = "Name for SSN 444-44-4444 is " + request.result.name;
 					};
 				}


 				//Read all data from the store through cursor
 				function readAll()
 				{
 				
 					var objectStore = db.transaction("customers").objectStore("customers");
 					
 					console.log(db.transaction("customers"));
 					console.log(objectStore);
 					document.getElementById("data").innerHTML="";

 					objectStore.openCursor().onsuccess = function(event) {
 					var cursor = event.target.result;
 						
 						//Iterate Cursor
                                              if (cursor) {
 							document.getElementById("data").innerHTML+="SSN: " + cursor.key + " Name: " + cursor.value.name +" Age: " + cursor.value.age+"<br />";
 							cursor.continue();
 						}
 						else {
 							console.log("No more entries!");
 						}
 					};
 				}
 				
 				//Update existing data through primary key and put method
 				function update()
 				{

 					var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
 					var request = objectStore.get("444-44-4444");
 					request.onerror = function(event) {
 					  
 					};
 					request.onsuccess = function(event) {
 					 
                                         //Get the current data					 
 					 var data = event.target.result;

 					  // update the value
 					  data.age = 42;

 					  // Put the updated object to store.
 					  var requestUpdate = objectStore.put(data);
 					   requestUpdate.onerror = function(event) {
 						 // error
 					   };
 					   requestUpdate.onsuccess = function(event) {
 						 console.log("Success - the data is updated!");
 					   };
 					};	
 				}				

 			
 			} else {
 				console.log("No IndexDB support..");		
 			}	
 			
 		</script>
 		
 		
 	</head>
 	<body>
 		Welcome to Browser Storage Demos - IndexDB API	<br/>
 		
 		<p id="data"></p>
                <button onclick = "read()">Read </button>
                <button onclick = "readAll()">Read all </button>
                <button onclick = "add()">Add data </button>
                <button onclick = "deleteData()">Delete data </button>
 		<button onclick = "update()">Update data </button>
 	
 	</body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>Browser Storage Demos - IndexDB API </title>


	<script type = "text/javascript">

	//Check for browser support
	if (window.indexedDB) {

	//Sample data
	const customerData = [{ ssn: "444-44-4444", name: "test1", age: 35, email: "[email protected]" },
	{ ssn: "555-55-5555", name: "test2", age: 32, email: "[email protected]" }];
	const dbName = "testDB";
	var db;
	//open the db, the db is created if not exist already
	//Specify DB name and version, update the version number if the DB structure need to be modified
	var request = indexedDB.open(dbName, 2);

	//Error Handler
	request.onerror = function(event) {
	console.log("error: ");
	};

	//Success Handler
	request.onsuccess = function(event) {
	db = request.result;
	console.log("success: "+ db);
	};

	//Handler invoked on successful opening of database
	//Upgrade the existing DB object if the version is different or create the objects
	request.onupgradeneeded = function(event) {
	var db = event.target.result;

	// autoIncrement: true
	//Create Object store with primary key
	var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

	//Define the required Indexes
	objectStore.createIndex("name", "name", { unique: false });
	objectStore.createIndex("email", "email", { unique: true });

	//Add data to the object
	customerData.forEach(function(customer) {
	objectStore.add(customer);
	});

	};

	function add() {

	//Retrieve the transaction for specific object, specify the mode - readonly, readwrite and versionchange
	var transaction = db.transaction(["customers"], "readwrite");

	// Handler Invoked when all the data is added to the database.
	transaction.oncomplete = function(event) {
	console.log("Add Completed!");
	};

	//Error Handler
	transaction.onerror = function(event) {

	};

	const customerDataNew = [{ ssn: "777-77-7777", name: "Test3", age: 32, email: "[email protected]" }];

	//Add new customer data to the store
	var objectStore = transaction.objectStore("customers");
	customerDataNew.forEach(function(customer) {
	var request = objectStore.add(customer);
	request.onsuccess = function(event) {
	console.log("Data Added..."+event.target.result);
	};
	});
	}


	//Delete data from the store through primary key and delete method
	function deleteData()
	{
	var request = db.transaction(["customers"], "readwrite")
	.objectStore("customers")
	.delete("777-77-7777");
	request.onsuccess = function(event) {
	console.log("Record Deleted!");
	};
	}

	//Read data from the store through primary key and get method
	function read()
	{
	var transaction = db.transaction(["customers"]);
	var objectStore = transaction.objectStore("customers");
	var request = objectStore.get("444-44-4444");
	request.onerror = function(event) {
	// Handle errors!
	};
	request.onsuccess = function(event) {
	document.getElementById("data").innerHTML = "Name for SSN 444-44-4444 is " + request.result.name;
	};
	}


	//Read all data from the store through cursor
	function readAll()
	{

	var objectStore = db.transaction("customers").objectStore("customers");

	console.log(db.transaction("customers"));
	console.log(objectStore);
	document.getElementById("data").innerHTML="";

	objectStore.openCursor().onsuccess = function(event) {
	var cursor = event.target.result;

	//Iterate Cursor
	if (cursor) {
	document.getElementById("data").innerHTML+="SSN: " + cursor.key + " Name: " + cursor.value.name +" Age: " + cursor.value.age+"<br />";
	cursor.continue();
	}
	else {
	console.log("No more entries!");
	}
	};
	}

	//Update existing data through primary key and put method
	function update()
	{

	var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
	var request = objectStore.get("444-44-4444");
	request.onerror = function(event) {

	};
	request.onsuccess = function(event) {

	//Get the current data
	var data = event.target.result;

	// update the value
	data.age = 42;

	// Put the updated object to store.
	var requestUpdate = objectStore.put(data);
	requestUpdate.onerror = function(event) {
	// error
	};
	requestUpdate.onsuccess = function(event) {
	console.log("Success - the data is updated!");
	};
	};
	}


	} else {
	console.log("No IndexDB support..");
	}

	</script>


	</head>
	<body>
	Welcome to Browser Storage Demos - IndexDB API <br/>

	<p id="data"></p>
	<button onclick = "read()">Read </button>
	<button onclick = "readAll()">Read all </button>
	<button onclick = "add()">Add data </button>
	<button onclick = "deleteData()">Delete data </button>
	<button onclick = "update()">Update data </button>

	</body>
	</html>