IndexedDB: the local database in HTML5
This article is about the API IndexedDB, which is a local database on your computer. This API has become the standard in applications made with HTML5.
It has a number of advantages over traditional databases. One of them is that it does not have to connect to the server to return information, so the response is faster. On the other hand, it offers greater flexibility when storing data, as it is not governed by tables.
Let's look at an example where we will create a local database on a web page. The user will be able to insert books with the following parameters: title, author, year and ISBN. Once this data is stored, the user can delete a book from the database if they wish.
First, we will create an HTML document, to which we will add this form in the body of the HTML document. The complete code is below and does not contain CSS styles. This is what will be seen in the browser.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Exercise Module indexedDB</title>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<script type="text/javascript" src="index++.js"></script>
</head>
<body>
<div id="container">
<form id="form" name="form" method="post" action="">
<h2>Exercise 6 indexedDB</h2>
<table>
<tr>
<td>Title</td>
<td><input type="text" name="title" id="title"></td>
</tr>
<tr>
<td>ISBN</td>
<td><input type="text" name="isbn" id="isbn"></td>
</tr>
<tr>
<td>Author</td>
<td><input type="text" name="author" id="author"></td>
</tr>
<tr>
<td>Year</td>
<td><input type="text" name="year" id="year"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="button" id="button" value='Send'>
</tr>
</table>
</form>
<br>
<br>
<label>Title:</label>
<input type="text" name="deleteClave" id="deleteClave">
<input type="submit" name="delete" id='delete' value="Delete"></td>
</div>
</body>
</html>
Create the Database in IndexedDB
We have added JavaScript code to the HTML document mentioned above. This JavaScript code will be responsible for creating the local database and storing data in the browser.
Therefore, the first thing we will do is declare the variable bd with global scope. This will allow us to use it inside and outside the functions that we will see below.
We will set the window object to listen for the load event. This load event will be executed once the page has been loaded by the browser. Once this has happened, the start function is activated. This line of code is placed at the end of the JavaScript document.
window.addEventListener(“load”, iniciar, false)
Next, we declare the variables that correspond to the elements of the HTML document, such as title, ISBN, author, etc. The id value of each element is taken into account for selection.
With indexedDB.open(“Books”, 2); we are creating the Books database in version 2. This is stored in the request variable.
JS
//declaration of variable bd
var bd;
function start(){
var title= document.getElementById('title');
var isbn = document.getElementById('isbn');
var author = document.getElementById('author');
var year = document.getElementById('year');
var button = document.getElementById('button');
var delete = document.getElementById('delete');
button.addEventListener('click', add, false);
delete.addEventListener('click', deleteClave, false);
var request = indexedDB.open('deusto', 2);
request.onsuccess = function(e){
bd = e.target.result;
}
request.onupgradeneeded = function(e){
bd = e.target.result;
bd.createObjectStore('books', {keyPath: 'title'});
}
}
Adding and Deleting Data in IndexedDB
The add function collects the values entered by the user and stores them in the database.
JS
function add(){
var title = document.getElementById('title').value;
var isbn = document.getElementById('isbn').value;
var author = document.getElementById('author').value;
var year = document.getElementById('year').value;
var book = {title: title, isbn: isbn, author: author, year: year};
var customerObjecstore = bd.transaction('books', 'readwrite').objectStore('books');
customerObjecstore.add(book);
alert ('Register stored successfully in the database');
return false;
}
The deleteClave() function is responsible for deleting the data from the database for the key designated by the user.
JS
function deleteClave(){
var delete = document.getElementById('deleteClave').value;
var customerObjecstore = bd.transaction('books', 'readwrite').objectStore('books');
var register = customerObjecstore.delete(delete);
register.onsuccess = function(e){
alert('Register deleted from the database successfully');
return false;
}
}
window.addEventListener('load', start, false);
This article is intended for programming students, and one of its exercises involves using IndexedDB as a local database.
In short, there are many more articles and tutorials on the web that discuss indexeddb databases. For those who want to learn more about indexeddb, you can follow the link that specifically discusses this HTML API Creatuwebpymes is a web design and programming company in the Canary Islands that ❤️ programming.
