HTML - IndexedDB

Creating Data

To add data to an object store in IndexedDB, you need to use transactions. First, open a transaction on the desired object store with the "readwrite" mode. Then, get a reference to the object store using the objectStore() method on the transaction object. Finally, use the add() or put() method on the object store to add the data.

let db;
let request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
  db = event.target.result;
  addData({ id: 1, name: "John Doe", age: 25 });
};

function addData(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Data added successfully");
  };

  request.onerror = function(event) {
    console.log("Error adding data");
  };
}

The add() method is used to add new data, while the put() method can be used to add new data or update existing data if the key already exists.

It's important to handle errors that may occur during the data addition process. You can use the onerror event handler on the request object to catch and handle any errors.

Reading Data

To get data from an object store, you can use the get() method on the object store. You need to provide the key of the data you want to get.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Retrieved data:", data);
};

If you want to search for data based on a specific property, you can use indexes. First, get a reference to the index using the index() method on the object store. Then, use the get() method on the index to get data based on the index key.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("name");

let request = index.get("John Doe");

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Retrieved data:", data);
};

For more advanced querying or going through multiple data entries, you can use cursors. Cursors allow you to go through all the data in an object store or index. You can open a cursor using the openCursor() method on the object store or index.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.openCursor();

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log("Key:", cursor.key);
    console.log("Data:", cursor.value);
    cursor.continue();
  } else {
    console.log("No more data");
  }
};

In the example above, we open a cursor on the object store. The onsuccess event handler is called for each data entry. We can access the key and value of the current entry using cursor.key and cursor.value, respectively. To go to the next entry, we call the continue() method on the cursor.

Updating Data

To update existing data in an object store, you can use the put() method. It works similarly to the add() method, but if the key already exists, it will update the corresponding data.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let updatedData = { id: 1, name: "John Doe", age: 26 };
let request = objectStore.put(updatedData);

request.onsuccess = function(event) {
  console.log("Data updated successfully");
};

You can also update specific fields of an existing data entry using the put() method. First, get the data using the get() method, update the desired fields, and then use put() to save the changes.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  data.age = 27;

  let updateRequest = objectStore.put(data);

  updateRequest.onsuccess = function(event) {
    console.log("Data updated successfully");
  };
};

When updating data, be mindful of versioning and schema changes. If you need to change the structure of your object stores or indexes, you should handle it in the onupgradeneeded event handler and properly version your database.

Deleting Data

To remove data from an object store, you can use the delete() method on the object store. You need to provide the key of the data you want to remove.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.delete(1);

request.onsuccess = function(event) {
  console.log("Data removed successfully");
};

If you want to clear an entire object store, you can use the clear() method on the object store.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.clear();

request.onsuccess = function(event) {
  console.log("Object store cleared successfully");
};

To delete a database, you can use the deleteDatabase() method on the indexedDB object. This will completely remove the database and all its object stores.

let request = indexedDB.deleteDatabase("MyDatabase");

request.onsuccess = function(event) {
  console.log("Database deleted successfully");
};

Be cautious when deleting data, as it is a permanent operation and cannot be undone.

Versioning and Upgrades

IndexedDB uses versioning to manage changes to the database structure over time. Each database has a version number associated with it. When you open a database with a higher version number than the current one, the onupgradeneeded event is triggered, letting you change the database schema.

let request = indexedDB.open("MyDatabase", 2); // Upgrade to version 2

request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // Perform database schema changes
  if (event.oldVersion < 1) {
    // Create object stores and indexes for version 1
    let objectStore = db.createObjectStore("MyObjectStore", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
  }

  if (event.oldVersion < 2) {
    // Make changes for version 2
    let objectStore = db.createObjectStore("AnotherObjectStore", { keyPath: "id" });
    objectStore.createIndex("category", "category", { unique: false });
  }
};

In the example above, we open the database with version 2. If the current version is lower than 2, the onupgradeneeded event is triggered. We can then check the oldVersion property to find the current version and make the necessary schema changes for each version upgrade.

Indexes and Compound Keys

Indexes in IndexedDB let you query and search data efficiently based on specific properties. You can create indexes on single properties or create compound indexes that combine multiple properties.

let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("MyObjectStore", { keyPath: "id" });

  // Create a single-property index
  objectStore.createIndex("name", "name", { unique: false });

  // Create a compound index
  objectStore.createIndex("nameAge", ["name", "age"], { unique: false });
};

In the example above, we create a single-property index on the "name" property and a compound index on the "name" and "age" properties. Compound indexes let you query data based on multiple properties at the same time.

Transactions and Concurrency

Transactions in IndexedDB make sure data is correct and consistent. All database operations must be done within a transaction. Transactions can be read-only or read-write, depending on the type of operations being done.

IndexedDB also supports concurrent access to the database. Multiple transactions can be active at the same time, but they operate on different object stores or have different access modes (read-only or read-write) to avoid conflicts.

let transaction1 = db.transaction(["ObjectStore1"], "readonly");
let transaction2 = db.transaction(["ObjectStore2"], "readwrite");

// Multiple transactions can be active concurrently
transaction1.objectStore("ObjectStore1").get(1);
transaction2.objectStore("ObjectStore2").add({ id: 1, name: "John" });

In the example above, we have two transactions active at the same time. transaction1 is read-only and operates on "ObjectStore1", while transaction2 is read-write and operates on "ObjectStore2". They can proceed independently without conflicts.

Performance Considerations

To optimize the performance of your IndexedDB usage, consider the following:

By keeping these performance considerations in mind and using indexes, transactions, and concurrency well, you can build efficient and fast web applications with IndexedDB.

Handling Sensitive Data

If your application deals with sensitive data, such as personal information or financial details, you need to take extra precautions when storing and handling that data in IndexedDB. Here are some best practices:

1. Encrypt sensitive data: Before storing sensitive information in IndexedDB, encrypt it using a strong encryption algorithm. This way, even if someone gets access to the IndexedDB data, they won't be able to read the sensitive information without the encryption key.

2. Use secure encryption libraries: Use well-established and trusted encryption libraries or algorithms, such as AES (Advanced Encryption Standard), to encrypt and decrypt sensitive data. Don't make your own encryption algorithms, as they may have vulnerabilities.

3. Store encryption keys securely: Keep the encryption keys used to encrypt and decrypt sensitive data secure. Don't store them in the same database as the encrypted data. Instead, think about using techniques like key derivation functions or secure key storage mechanisms provided by the platform or browser.

4. Minimize data retention: Only store sensitive data in IndexedDB when absolutely necessary. If the data is no longer needed, securely delete it from the database. Regularly review and remove any unnecessary sensitive information to reduce the risk of data breaches.

Securing Access to IndexedDB

In addition to handling sensitive data securely, you should also control access to IndexedDB to prevent unauthorized access or changes. Here are some measures you can take:

1. Use browser security features: Use browser security features like the Same-Origin Policy and Content Security Policy (CSP) to restrict access to IndexedDB from untrusted sources. These policies help prevent cross-site scripting (XSS) attacks and unauthorized access to IndexedDB from different origins.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

2. Implement user authentication: If your application requires user authentication, make sure that only authenticated users can access the IndexedDB data. Use secure authentication mechanisms, such as tokens or session management, to check the user's identity before granting access to the database.

// Example of token-based authentication
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

3. Apply access controls: Implement access controls based on user roles or permissions. Decide which users or user groups should have read or write access to specific object stores or data within IndexedDB. Use these access controls consistently throughout your application.

4. Validate and sanitize user input: When accepting user input that will be stored in IndexedDB, validate and sanitize the input to prevent potential security vulnerabilities like SQL injection or cross-site scripting attacks. Use strict validation rules and escape or remove any malicious characters or scripts.

const sanitizedInput = input.replace(/[<>]/g, ''); // simple sanitation

5. Use secure communication: If your application communicates with a server to synchronize IndexedDB data, make sure that the communication channel is secure. Use HTTPS/SSL to encrypt the data transmitted between the client and the server, preventing eavesdropping or tampering.

<form action="https://yourserver.com/submit" method="post">
  <input type="text" name="data">
  <input type="submit" value="Submit">
</form>

Remember, security is an ongoing process, and it's important to stay updated with the latest security best practices and vulnerabilities. Regularly review and update your security measures to protect sensitive data and keep your IndexedDB implementation safe.

Offline Data Storage and Sync

One of the key benefits of IndexedDB is its ability to store data offline and enable offline functionality in web applications. With IndexedDB, you can store application data locally on the user's device, allowing them to access and interact with the application even when they are not connected to the internet.

// Store data offline
function storeDataOffline(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Data stored offline");
  };
}

// Sync data when online
function syncDataWithServer() {
  let transaction = db.transaction(["MyObjectStore"], "readonly");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.openCursor();

  request.onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
      let data = cursor.value;
      sendDataToServer(data);
      cursor.continue();
    } else {
      console.log("All data synced with server");
    }
  };
}

// Send data to server
function sendDataToServer(data) {
  fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
    .then(response => {
      if (response.ok) {
        console.log("Data synced with server");
      }
    });
}

The storeDataOffline function stores data in IndexedDB when the application is offline. The data is added to an object store within a transaction. Later, when the application comes back online, the syncDataWithServer function uses a cursor to go through all the stored data and sends each data item to the server using the sendDataToServer function. This way, the application can work offline and sync the data with the server when a connection is restored.

Caching Application Data

IndexedDB can be used as a caching mechanism to store frequently accessed or slow-to-load data locally. By caching data in IndexedDB, you can improve the performance and speed of your web application.

// Check cache for data
function getDataFromCache(key) {
  return new Promise((resolve, reject) => {
    let transaction = db.transaction(["CacheStore"], "readonly");
    let objectStore = transaction.objectStore("CacheStore");

    let request = objectStore.get(key);

    request.onsuccess = function(event) {
      let data = event.target.result;
      if (data) {
        console.log("Data retrieved from cache");
        resolve(data);
      } else {
        console.log("Data not found in cache");
        reject();
      }
    };
  });
}

// Store data in cache
function storeDataInCache(key, data) {
  let transaction = db.transaction(["CacheStore"], "readwrite");
  let objectStore = transaction.objectStore("CacheStore");

  let request = objectStore.put(data, key);

  request.onsuccess = function(event) {
    console.log("Data stored in cache");
  };
}

// Get data from cache or fetch from server
function getData(key) {
  getDataFromCache(key)
    .then(data => {
      console.log("Data retrieved from cache:", data);
    })
    .catch(() => {
      fetch(`https://api.example.com/data/${key}`)
        .then(response => response.json())
        .then(data => {
          console.log("Data retrieved from server:", data);
          storeDataInCache(key, data);
        });
    });
}

The getDataFromCache function checks if the requested data is available in the cache (IndexedDB). If the data is found, it is resolved and returned. If the data is not found in the cache, the function rejects, and the getData function fetches the data from the server using the fetch API. Once the data is retrieved from the server, it is stored in the cache using the storeDataInCache function for future access.

By implementing this caching mechanism, you can reduce the number of network requests and improve the loading speed of your application by serving data from the local cache when available.

Implementing Search Functionality

IndexedDB's indexing capabilities make it well-suited for implementing search functionality within a web application. By creating indexes on searchable fields, you can quickly search and retrieve data based on specific criteria.

// Create index on searchable field
function createSearchIndex() {
  let request = indexedDB.open("MyDatabase", 1);

  request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let objectStore = db.createObjectStore("ProductStore", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
  };
}

// Search for data using index
function searchData(searchTerm) {
  let transaction = db.transaction(["ProductStore"], "readonly");
  let objectStore = transaction.objectStore("ProductStore");
  let index = objectStore.index("name");

  let request = index.getAll(IDBKeyRange.bound(searchTerm, searchTerm + '\uffff'));

  request.onsuccess = function(event) {
    let results = event.target.result;
    console.log("Search results:", results);
  };
}

// Example usage
createSearchIndex();

// Add sample data
let transaction = db.transaction(["ProductStore"], "readwrite");
let objectStore = transaction.objectStore("ProductStore");
objectStore.add({ id: 1, name: "Apple", category: "Fruit" });
objectStore.add({ id: 2, name: "Banana", category: "Fruit" });
objectStore.add({ id: 3, name: "Orange", category: "Fruit" });

// Perform search
searchData("App");

We create an index on the "name" field of the "ProductStore" object store using the createSearchIndex function. This allows efficient searching based on the product name.

The searchData function performs a search using the index. It takes a search term as input and uses the getAll method with an IDBKeyRange to find all products that match the search term.

In the example usage, we create the search index, add some sample data to the "ProductStore" object store, and then perform a search for products with "App" in their name. The search results are logged to the console.

These are just a few examples of how IndexedDB can be used in practical scenarios. IndexedDB's flexibility and powerful features make it suitable for a wide range of use cases where client-side data storage and handling are required.