What is IndexedDB and how does it work?

What is IndexedDB and how does it work?

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. It allows you to store data in a way that is more complex than localStorage.

What are the advantages of using IndexedDB over localStorage?

IndexedDB supports larger amounts of data, complex queries, and transactions, making it more suitable for applications that require offline capabilities.

Can you give me an example of how to use IndexedDB in a web application?

Sure! You can open a database, create an object store, and then add data like this:

let request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
    let db = event.target.result;
    db.createObjectStore('myStore', { keyPath: 'id' });
};
request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction('myStore', 'readwrite');
    let store = transaction.objectStore('myStore');
    store.add({ id: 1, name: 'Item 1' });
};

Is IndexedDB supported in all browsers?

Yes, IndexedDB is widely supported in modern browsers, including Chrome, Firefox, Safari, and Edge. However, it's always good to check for specific versions.