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
9
votes
2 answers

Optimized Bulk (Chunk) Upload Of Objects Into IndexedDB

I want to add objects into some table in IndexedDB in one transaction: _that.bulkSet = function(data, key) { var transaction = _db.transaction([_tblName], "readwrite"), store = transaction.objectStore(_tblName), ii = 0; …
Kanan Farzali
  • 991
  • 13
  • 23
9
votes
1 answer

IndexedDB: Retrieve item with max value

Suppose I have an IndexedDB collection with name items. All items have fields: id name revision revision field is a number field. I need to retrieve an item with max value of revision (or at least just retrive max revision value). What is the best…
alexpods
  • 47,475
  • 10
  • 100
  • 94
9
votes
2 answers

How to create index on array element in indexeddb

I have an object, var _data = { teacher : { name : "Mack", subject : "Maths" }, Student : [{ name : "Alex", stud_id : 1 },{ name : "Jack", …
User 780611
  • 175
  • 1
  • 12
9
votes
4 answers

InvalidStateError while opening IndexedDB in Firefox

In Firefox 17.0.1 when I try to open the IndexedDB database, Firebug console shows me an InvalidStateError exception. Also request.onerror event is raised, but event.target.errorCode is undefined. if (window.indexedDB) { var request =…
Václav Dajbych
  • 2,584
  • 2
  • 30
  • 45
9
votes
2 answers

Explain how a generator is used in this JavaScript code with IndexedDB?

While making my way through the wonderful world of IndexedDB, I came across code like this from Mozilla's test suite: /** * Any copyright is dedicated to the Public Domain. * http://creativecommons.org/publicdomain/zero/1.0/ */ var testGenerator…
dumbmatter
  • 9,351
  • 7
  • 41
  • 80
9
votes
1 answer

How can I put several requests in one transaction in IndexedDB

My code is like the following: ... var f1 = function(trans) { var store = trans.objectStore('ObjectStore'); store.clear(); }; var f2 = function(trans) { var store = trans.objectStore('ObjectStore'); store.add({id: 1, data:…
Fedor
  • 1,392
  • 1
  • 17
  • 30
8
votes
2 answers

Saving ArrayBuffer in IndexedDB

How can I save binary data (in an ArrayBuffer object) into IndexedDB? The IndexedDB spec doesn't mention ArrayBuffer - does that mean that is not supported (and I have to pack ArrayBuffer as a string or a an array?).
Mortennobel
  • 3,383
  • 4
  • 29
  • 46
8
votes
3 answers

Error "A mutation operation was attempted on a database that did not allow mutations." when retrieving data in indexedDB

I have this simple example code: var request = mozIndexedDB.open('MyTestDatabase'); request.onsuccess = function(event){ var db = event.target.result; var request = db.setVersion('1.0'); request.onsuccess = function(event){ …
Aleksandr Motsjonov
  • 1,230
  • 3
  • 14
  • 25
8
votes
2 answers

Why they use reserved keyword 'continue' to name a function in IndexedDB's Cursor object?

According to http://www.w3.org/TR/IndexedDB/#widl-IDBCursor-continue, the IDBCursor object has methods named "continue" and "delete". Aren't those reserved keywords? Why would they use these names in the specs? My javascript compiler keeps warning…
Chan Le
  • 2,184
  • 3
  • 23
  • 33
8
votes
0 answers

How to replicate IndexedDB "Database deleted by request of the user" error in ios14?

I'm using the excellent https://www.npmjs.com/package/idb package to manage a simple indexedDB implementation on a web app. I'm having this error "UnknownError: Database deleted by request of the user" reported to our error reporting system for a…
greenbricks
  • 143
  • 5
8
votes
2 answers

Request persistent storage permissions

Users of my web app have requested an "offline mode" that stores their work on the hard drive while an Internet connection is not available. They could be offline for anywhere from a few minutes to multiple weeks, so in order to prevent loss of…
Isaac Lyman
  • 2,175
  • 1
  • 22
  • 42
8
votes
2 answers

Chrome on Android: Granted Quota for IndexedDB suddenly almost 0

Was there recently a change in Android Chrome's quota management for IndexedDB? I'm using PouchDB with adapter IndexedDB in an Ionic 3 Cordova app. It went pretty smooth for the last 6 months. But within the last 5 days, I received a significant…
ntaso
  • 614
  • 6
  • 12
8
votes
2 answers

Why are my data saved in WebSQL and not in IndexedDB? (ionic)

I can't understand this simply thing. I need to store data in a database so, following the ionic documentation, I did exactly what this page says: https://ionicframework.com/docs/storage/ I read on web that WebSQL is deprecated so I'd like to use…
AlessioF
  • 453
  • 2
  • 8
  • 19
8
votes
2 answers

Failed to execute 'only' on 'IDBKeyRange': The parameter is not a valid key

I am fetching data from indexeddb using where class using jsstore.I got response.But getting "Failed to execute 'only' on 'IDBKeyRange': The parameter is not a valid key. " console error.Why I am getting this error.can anyone pls help me. //Get…
kamalav
  • 1,190
  • 4
  • 14
  • 31
8
votes
2 answers

IndexedDB to store audio

Is it possible to use IndexedDB on a web page to store audio? Currently trying out the Cache API, but looking for something that can be a little more persistent.
austinh
  • 1,061
  • 6
  • 13
  • 34