A Plain Explanation of IndexedDB

Browsers offer several methods for storing data, and not all data needs to be saved on a backend database. Among the most commonly known and used are cookies and localStorage.

IndexedDB tends to be used less frequently since many scenarios are usually handled by backend servers. However, IndexedDB is actually a type of NoSQL storage provided by browsers. It supports transactions and indexing, allowing for range queries. It even considers database versioning, which facilitates data migration using version numbers. It’s quite powerful and can be considered a lightweight database built into the browser.

When used correctly, IndexedDB allows for achieving many functionalities typically needful of backend databases without actually having backend support. This makes IndexedDB ideal for static web tools, as it allows you to store data and tool settings right in the browser. Even without user registration or a backend server, users can still access the web tool.

IndexedDB isn’t just limited to web tools. For instance, YouTube also uses IndexedDB to store certain data (though the specifics require some investigation XD). You can explore this by opening the browser developer tools.

A distinct feature of IndexedDB is that each domain can only access its own IndexedDB. Therefore, you cannot use JavaScript to access the IndexedDB of website B from website A. Additionally, IndexedDB has the concepts of databases and tables. Each website can have multiple IndexedDB databases, and each database can have several tables.

If you’re interested in trying out IndexedDB, consider reading the article Working with IndexedDB on web.dev, which provides a very detailed explanation.

For implementing it in a product or service, I recommend using the Dexie.js library. It wraps the IndexedDB API very well and is supported by ecosystems like React, Vue, and Angular. The documentation is comprehensive and reliable!

That’s the introduction to IndexedDB.