Questions tagged [indexeddb]

indexedDB provides a way to store data in the browser using Javascript. Unlike relational databases, indexedDB uses a key-value store that is conceptually similar to HTML5's local storage. However, indexedDB is better than local storage for storing large amounts of data and for querying data more quickly. indexedDB is supported in IE, Chrome, Firefox, and Microsoft Edge, although support for specific features varies.

Overview

The indexedDB standard was created to enable scalable, performant storage and retrieval of Javascript objects in a browser. When using indexedDB, you create an object store, which is essentially a named collection of objects, and then can put objects into the store and later retrieve objects from the store. The store is capable of storing a "large" number of objects. You can also use an index to speed up retrieval.

Prerequisites

Before getting started with indexedDB, there are a couple key points you should consider:

First, indexedDB's API makes significant use of asynchronous functions. You should be familiar with writing asynchronous JavaScript before using indexedDB. A substantial amount of the questions on stackoverflow under the indexedDB tag relate to inexperience with asynchronous functions.

Second, indexedDB serializes objects when saving them. When you save an object in the database, the object itself is not saved. Instead, a serialized representation of the object is saved. This is comparable to using JSON.stringify together with JSON.parse. Therefore, when you retrieve the object from the store, you are retrieving this serialized representation, and not your original object. There are several ramifications of this design. This copy is not your actual object. It is a plain JavaScript object, with properties. Member functions are discarded along with object type information.

Basic concepts

  • Database: a container of object stores and indices. Every database has a name and a version.
  • Object store: a container of objects. This is analogous to a table in a relational database. In indexedDB, records correspond to Javascript objects, and columns correspond to Javascript object properties. Objects added to the store are stored in the order added. Queries against the store retrieve objects in the same order. You can insert, update, or delete objects in an object store.
  • Index: a special container for specific objects contained within an object store. Indices are also analogous to tables, and can be understood as object stores with special constraints. When an object is inserted into an object store, it may, if it meets certain criteria, also be inserted into a corresponding index store. Objects in an index are stored in an order defined by the index. Queries against an index retrieve objects in the order defined by the index (although queries can be configured to work differently). You cannot insert, update, or delete objects in an index (you can only do so indirectly by inserting the object into the store upon which the index is based).
  • Cursor: cursors are analogous to queries. A cursor iterates over the objects in either an object store or an index. Cursors can move forwards or backwards, seek (jump or advance past objects), and jump to the next or previous 'unique' object in the underlying store/index.
  • Key path: key paths are analogous to primary keys (or compound primary keys) of a table in a relational database. In the general case, when you instruct indexedDB to create an object store in a particular database, you also define the key path for the store. You can use the key path to quickly get a particular object, which is similar to using a primary key to select a record in a relational table. You can, optionally, use keys to ensure that later attempts to insert an object into an object store that already contains an object with the same key will produce an error.
  • Transactions and requests: requests are analogous to individual SQL queries. There are specific API methods for inserting an object, deleting an object, updating an object, and iterating over one or more objects. Each method call corresponds to a single request. Each request occurs within the context of a transaction. In other words, multiple requests can occur in one transaction. Individual requests can fail for a variety of reasons. When performing multiple requests in a single transaction, the requests are not fully committed until all the requests are considered successful. In this manner, if a problem occurs in a later request, the entire transaction can be "rolled back" so that the state of the underlying object store is the same as it was before the occurrence of the first request in the transaction.

Support

Visit http://caniuse.com/#feat=indexeddb.

Learn More

2343 questions
19
votes
5 answers

IndexedDB - boolean index

Is it possible to create an index on a Boolean type field? Lets say the schema of the records I want to store is: { id:1, name:"Kris", _dirty:true } I created normal not unique index (onupgradeneeded): ... store.createIndex("dirty","_dirty",{…
g00fy
  • 4,717
  • 1
  • 30
  • 46
19
votes
1 answer

When and why is the onupgradeneeded method called in indexedDB?

I'm using IndexedDB for a test project. Here is some example code: var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB||window.msIndexedDB; var request = indexedDB.open("mydb",2), …
Johan
  • 35,120
  • 54
  • 178
  • 293
18
votes
1 answer

Using indexeddb operation in multiple tabs

I am trying to save data from one tab to indexeddb and trying to get the data from another tab. But the operation is happening in second tab, only when i close the first tab or close the indexeddb in first tab using indexeddb.close(); How to get…
18
votes
2 answers

IndexedDB getting all data with keys

Using the IndexedDB API we have these 2 methods: getAll() and getAllKeys() with an usage example below: let transaction = this.db.transaction(["table"]); let object_store = transaction.objectStore("table"); request = object_store.getAll(); /* or…
TheMechanic
  • 820
  • 1
  • 8
  • 23
18
votes
2 answers

Add more service-worker functionality with create-react-app

So create-react-app includes service worker functionality by default, which is lovely - all my static assets get cached for offline use out of the box. Cool, but now I want to take things a bit further and use indexedDB to cache some dynamic…
18
votes
1 answer

Show video blob after reading it through AJAX

While I was trying to create a workaround for Chrome unsupporting blobs in IndexedDB I discovered that I could read an image through AJAX as an arraybuffer, store it in IndexedDB, extract it, convert it to a blob and then show it in an element…
Pedro Almeida
  • 658
  • 1
  • 7
  • 10
18
votes
1 answer

How to sync indexedDB local data with Server?

I have a small project which stores data in IndexedDB in browser. I would like to add sync functionality so users can access the data everywhere. How can I sync local IndexedDB data in a remote server or server database so I can access it…
pmoubed
  • 3,842
  • 10
  • 37
  • 60
17
votes
6 answers

JavaScript Library to Bridge IndexedDB and WebSQL

I'm curious if there is a library or a project out there to provide a generic interface to IndexedDB or to WebSQL, depending on user's browser's support. If they're using Chrome/Safari, use WebSQL, if they're using Firefox or Internet Explorer, use…
Peder Rice
  • 1,764
  • 3
  • 28
  • 51
17
votes
2 answers

Using IndexedDB asynchronously

Loading data and store them in indexeddb database. Periodically I have the database crashes and lost access to it. Give me, please, a solution how use indexeddb asynchronously! Sample code that I'm use now: var dataTotal = 0; var threads =…
Greg
  • 171
  • 1
  • 1
  • 5
17
votes
3 answers

Accessing indexedDB in ServiceWorker. Race condition

There aren't many examples demonstrating indexedDB in a ServiceWorker yet, but the ones I saw were all structured like this: const request = indexedDB.open( 'myDB', 1 ); var db; request.onupgradeneeded = ... request.onsuccess = function() { db…
Adria
  • 8,651
  • 4
  • 37
  • 30
17
votes
1 answer

IndexedDB - ObjectStores vs multiple databases vs indices?

I was wondering when it would be a good idea to have a single database vs one database with multiple object stores. I've read most tutorials on the web as well as looked at the specification for indexedDB, but could not find a good example comparing…
lima
  • 171
  • 4
17
votes
3 answers

Sorting the results of an indexedDB query

I want to sort results obtained from indexedDB. Each record has structure {id, text, date} where 'id' is the keyPath. I want to sort the results by date. My current code is as below: var trans = db.transaction(['msgs'], IDBTransaction.READ); …
vivek.m
  • 3,213
  • 5
  • 33
  • 48
16
votes
2 answers

Why is this IndexedDB put command failing? Error: DataError: DOM IDBDatabase Exception 0

I have successfully added the following to the objectStore when I created it: { name: "John Doe", age: 21 } I used the options: { keyPath: "id", autoIncrement: true } I am able to find that record and it shows the id = 1. However, when I run this…
Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
16
votes
4 answers

How do I update data in indexedDB?

I have tried to get some information from W3C regarding the update of an objectStore item in a indexedDB database, but with not so much susccess. I found here a way to do it, but it doesn't really work for me. My implementation is something like…
Michael
  • 4,786
  • 11
  • 45
  • 68
15
votes
2 answers

How is it possible to build database index on top of key/value store?

I was reading about LevelDB and found out that: Upcoming versions of the Chrome browser include an implementation of the IndexedDB HTML5 API that is built on top of LevelDB IndexedDB is also a simple key/value store that has the ability to index…
Lu4
  • 14,873
  • 15
  • 79
  • 132