techforum-repo/indexeddb.html

## 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: "test1@company.com" },
									  { ssn: "555-55-5555", name: "test2", age: 32, email: "test2@home.org" }];
				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: "test3@home.org" }];

					//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: "test1@company.com" },
	{ ssn: "555-55-5555", name: "test2", age: 32, email: "test2@home.org" }];
	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: "test3@home.org" }];

	//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>