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
10
votes
3 answers

Delete method is not working for Indexed DB HTML5... It returns success but the record is not deleted

Another problem that I am getting with Indexed DB for HTML5, using Desktop Chrome, is that I can not delete a record from an object store. The onsuccess event is triggered but the record is still there... My ID is a time stamp just because I wanted…
the_moon
  • 553
  • 1
  • 7
  • 21
10
votes
1 answer

How can I enable users to efficiently save the contents of an indexedDB object store to a file?

I am storing a large amount of small objects in IndexedDB. I would like to give the user the ability to export one of the object stores to a file that they can "download". I have read this blog article. Which describes reading the data,…
Chad
  • 19,219
  • 4
  • 50
  • 73
10
votes
1 answer

IndexedDB, unlimitedStorage and accessing database created in content script from background/options script

A few questions regarding IndexedDB, unlimitedStorage permission and accessing database created in content script from background/options script: Does "unlimitedStorage" permission covers databases created in background.js? (it's unclear in the…
przemoc
  • 3,759
  • 1
  • 25
  • 29
10
votes
3 answers

Indexeddb : How to limit number of objects returned?

I'm using a cursor with a lower bound range query. I can't find a way to limit the number of objects returned, similar to a "LIMIT n" clause in a databse. var keyRange = IDBKeyRange.lowerBound(''); Does it not exist ?
Philippe Girolami
  • 1,876
  • 1
  • 13
  • 15
10
votes
5 answers

How to use joins in HTML5 Indexed Db?

I do want to join two table in HTML5 indexed db. I found lot samples to add, Update, Delete and listing record but can't found any samples to join multiple table. Sample URL: *http://users.telenet.be/kristofdegrave/*
muthuvel
  • 1,092
  • 10
  • 17
9
votes
3 answers

How to view IndexedDB content in chrome?

I am fairly new to writing code, but I played around with some chrome apps which use WebSQL for DB. I decided to learn IndexedDB, but needed something more visual, to help me out. WebSQL database entries can be easily seen in in resources tab in…
deckoff
  • 341
  • 1
  • 4
  • 16
9
votes
4 answers

Wrapper functions for IndexedDB

I need to build an offline HTML5 web app for a iPad/tablet device where the user can download a dataset (table of data) from the server and store it on the device. The user could then disconnect from the server and view/edit the data locally on the…
zuallauz
  • 4,328
  • 11
  • 43
  • 54
9
votes
1 answer

How to use Dexie.js inside of dedicated worker?

I have a function that fetch a JSON data via window.fetch and put it inside IndexedDB table via db.table.bulkPut(array_of_data). It takes more than 10 seconds to do that because of large amount of data and it blocks UI and makes UX bad. I have…
9
votes
1 answer

Write multiple where condition using Dexie.js

How can I write a where condition like the following using Dexie.js? field1=0 AND field2!='test' AND field3 IN(1,2,3,4) I tried this one but I got an…
Enricosoft
  • 869
  • 2
  • 10
  • 28
9
votes
1 answer

Correct way to add multiple objects in indexedDb?

I have the following array of objects which i want to add to and indexedDb: const data = [ { name: 'abc', color: 'blue' }, { name: 'xyz', color: 'red' }, { name: 'yui', color: 'black' }]; Now i create the…
Devashish
  • 1,260
  • 1
  • 10
  • 21
9
votes
5 answers

Does React Native support Indexed DB?

This question was asked on GitHub, with the answer being "Hey, have you heard of this website Stack Overflow? You should ask the question there!". So here I am, asking a question! Does React Native support Indexed DB? When refactoring an existing…
Bryan Rayner
  • 4,172
  • 4
  • 26
  • 38
9
votes
2 answers

Getting object store already exists inside onupgradeneeded

My code is as follows (usually naming convention for the well-known objects): var DBOpenRequest = window.indexedDB.open("messages", 6); //... DBOpenRequest.onupgradeneeded = function(event) { console.log("Need to upgrade."); var db =…
Old Geezer
  • 14,854
  • 31
  • 111
  • 198
9
votes
0 answers

How would I mirror Firebase database to local indexedDB for offline use in a React app?

I'm building a Progressive webapp which is designed to be offline first. I have already used service worker to cache the static app shell but for database data retrieved from firebase database , I can't seem to figure out how to cache it for offline…
jasan
  • 11,475
  • 22
  • 57
  • 97
9
votes
1 answer

The mysterious case of disappearing blobs in Chrome (in IndexedDB)

Summary What I am trying to do is pretty simple: 1a. If an image is not a local store of some sort (such as IndexedDB), read the image as a byte array from the server, put in local store (as a byte array or a reference to a file, I don't care) 1b.…
acarlon
  • 16,764
  • 7
  • 75
  • 94
9
votes
2 answers

Does iOS 8 support IndexedDB with UIWebView?

I see that Safari on iOS 8 has support for IndexedDB, but I can't find anything about UIWebView. From my preliminary testing, it looks like it doesn't, but I'm hoping someone out there has a concrete answer for me.
piebie
  • 2,652
  • 21
  • 30