Science Knowings: HTML Course For Social Media

HTML5 IndexedDB API

From Push Notifications to IndexedDB

We've covered HTML5 Push API, a powerful tool for sending notifications to users. Now, let's switch gears and dive into HTML5 IndexedDB API, a robust database solution for web applications.

What is IndexedDB?

IndexedDB is a browser-based database system that enables web applications to store and manage large amounts of structured data client-side, even when offline.

Why use IndexedDB?

IndexedDB offers several advantages over other storage options, including:

  • High Performance: Fast data access and manipulation capabilities.
  • Offline Support: Data remains accessible even without internet connectivity.
  • Large Storage Capacity: Can store large datasets, unlike browser cookies or local storage.

Key Features of IndexedDB

Key features of IndexedDB include:

  • Object Stores: Stores data as collections of key-value pairs.
  • Indexes: Allows fast data retrieval based on specific criteria.
  • Transactions: Ensures data integrity during complex operations.
  • Event-Driven API: Notifies applications of database changes.

Comparison with Other Storage Options

Feature IndexedDB Web SQL Local Storage
Offline Support Yes Yes No
Storage Capacity Large Medium Small
Data Structure Object Stores Tables Key-Value Pairs
Performance High Medium Low

Creating an IndexedDB Database

To create an IndexedDB database, use the following code:

var indexedDB = window.indexedDB;
var database = indexedDB.open("my_database", 1);

Opening and Closing a Database

To open and close an IndexedDB database, use the following methods:

database.onupgradeneeded = function(event) {
  // Create object stores and indexes here
};
database.onsuccess = function(event) {
  // Database opened successfully
};
database.onclose = function() {
  // Database closed
};

Creating and Deleting Object Stores

To create and delete object stores, use the following methods:

var objectStore = database.createObjectStore("customers", { keyPath: "id" });
objectStore.delete();

Adding Data to an Object Store

To add data to an object store, use the following method:

objectStore.add({ name: "Alice", age: 30 });

Reading Data from an Object Store

To read data from an object store, use the following method:

objectStore.get(30);

Updating Data in an Object Store

To update data in an object store, use the following method:

objectStore.put({ id: 30, name: "Updated Name", age: 31 });

Deleting Data from an Object Store

To delete data from an object store, use the following method:

objectStore.delete(30);

Transactions in IndexedDB

Transactions ensure data integrity during complex operations. To use transactions, follow these steps:

  1. Create a transaction object.
  2. Add operations to the transaction.
  3. Commit or rollback the transaction.

IndexedDB API Methods

Method Description
open() Opens an IndexedDB database.
createObjectStore() Creates an object store within a database.
deleteObjectStore() Deletes an object store from a database.
add() Adds data to an object store.
get() Retrieves data from an object store.
put() Updates or adds data to an object store.
delete() Deletes data from an object store.

Next Topic: HTML5 WebGL API

In our next session, we'll dive into HTML5 WebGL API, a powerful tool for creating 3D graphics in web applications. Join us to explore its features and applications!