IndexedDB in HTML5 is introduced for storing large amounts of structured data on the client side in WebBrowser.It is also known as The Indexed Database API in HTML5.
HTML5 provides the local database storage which is known as IndexedDB using API. IndexedDB in HTML5 is a more powerful option for storing large amounts of structured data.To store data in local system improves the Web application accessibility and responsiveness of applications.
[sociallocker]
IndexedDB API is used to create a rich data-intensive database which store locally for HTML5 web applications.It also helps to cache the data for online web or mobile applications to run and respond faster.
In this article, We will see how to manage IndexedDB for web application in HTML5. HTML5 IndexedDB is the replacement of cookie because it is more reliable data storage for large applications.
Also, To store a data locally makes application more faster, uses a less bandwidth and meet efficiency.HTML5 IndexedDB improves the richness of the browser because of WebStorage and is also called a lightweight NOSQL database.
LocalStorage
:
The first option is localStorage which allows you to use a simple key-value pair to store data locally. IndexedDB supports the local storage using large objects and retrieves data using robust data access mechanism.
IndexedDB API replaces the Web Storage API so it is not recommended for use in the HTML5 specification.Some of the leading browsers still support Web Storage, including Apple’s Safari and Opera Web browser. With compared to Web Storage, IndexedDB has several advantages, including indexing, transaction processing, and robust. In this post, we will go to learn IndexedDB with examples and will also show how to manage IndexedDB database.
Basics about Indexed DB
Indexed DB does not have a rigid table structure like MySQL which contain fixed database tables, but it is store information as collections of records like MONGODB.You can create one or more IndexedDB databases for the site with a unique name.
A database may contain one or more Object Stores. An object is saved by the unique name and a collection of records. Each record has a key and a value pair.Values can be anything like strings, numbers, objects, arrays, blobs etc which can have one or more attributes.A Key can be a string, a number or an array be and identifies a record. It may be a single identifier or multiple JavaScript separated by periods identifier.IndexedDB API supports an asynchronous and a synchronous API.
Let’s start to understand Indexed DB API with example and step by step:
1. Browser Support:
The first step is to check whether browser support IndexedDB or not. So Let’s check by using below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | if("indexedDB" in window) { console.log("YES, Browser support IndexedDB"); } else if ( "webkitIndexedDB" in window) { console.log("YES, Browser support IndexedDB"); } else if ( "mozIndexedDB" in window) { console.log("YES, Browser support IndexedDB"); } else { console.log("No,Browser not support."); } }); |
2.Create Database
Each database using Indexed DB can have only one version number. When you create a first database, it’s initial version number is zero. After creating the database, version number is used for internal versioning of web application. After creating a database, If you want to change database structure, the upgradeneeded event is used.When you trigger upgradeneeded event handler, you must open the database first.
Remember: Make sure the database or Object Stores must be located onupgradeneeded event handler when you want to modify it.
The following code snippet shows how to create a database.First of all, call an open method and pass the database name. If a database with the specified name does not exist, it will create the database.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function createDatabase() { var InDBconnect = localDatabase.indexedDB.open(dbName); InDBconnect.onerror = function(e) { }; InDBconnect.onsuccess = function(event) { //Database created localDatabase.db = InDBconnect.result; }; InDBconnect.onupgradeneeded = function (event) { // database structure change }; } |
IndexedDB is recommended for creating tables during initialization. After open each site in the browser, first check the version number. You do not need to create the database of the site a second time. The table in indexedDB is called object store.
When creating database, one of the following events fire on the request:
- error:if something goes wrong when you create the database
- upgradeneeded: when the database version has changed or create the database first.
- Success: when the already created database opened.It might be fire after upgradeneeded Event.
3. Delete the existing database
To delete an existing database, you can call deleteDatabase method and in that pass the name of the database you want to delete, as per following code snippet:
1 2 3 4 5 6 7 8 9 10 11 | function deleteDatabase() { var deleteDbRequest = localDatabase.indexedDB.deleteDatabase(dbName); deleteDbRequest.onsuccess = function (event) { // database deleted successfully }; deleteDbRequest.onerror = function (e) { console.log("Database error: " + e.target.errorCode); }; } |
Create and delete the database is very easy to use So this is the very basics for the Indexed DB in HTML5. Next we will learn how to use object stores in Indexed DB.
If you don’t want to miss any upcoming article in this series then subscribe our RSS Feed via mail, Like us on Facebook or Follow us no Twitter. If you do so, I am sure you will never miss any article from us.
[/sociallocker]
