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

File System Access API: is it possible to store the fileHandle of a saved or loaded file for later use?

Working on an app that uses the new(ish) File System Access API, and I wanted to save the fileHandles of recently loaded files, to display a "Recent Files..." menu option and let a user load one of these files without opening the system file…
Charles Johnson
  • 691
  • 1
  • 7
  • 19
15
votes
2 answers

Can I check how much space my indexedDB is taking up?

I'd like to get a breakdown of how much storage space a web app I'm working on is taking up. More specifically I'm interested in the size of data stored in indexedDB. I know I can use navigator.storage.estimate() to get a total value, but it shows…
user2145184
  • 440
  • 4
  • 15
15
votes
1 answer

failed to execute 'put' on 'idbobjectstore' evaluating the object store's key path did not yield a value

A chrome based APP which I am supporting gives us this error. I tried to find out more about the error but was unsuccessful. Can someone kindly explain me on what could be the cause of this. The Error is as below Image The put is happening at this…
Joy Shashreek
  • 159
  • 1
  • 1
  • 4
14
votes
4 answers

How can I access indexedDB synchronously?

The indexedDB has a spec saying that you can access an indexed database synchronously, but it hasn't been implemented yet. I was just wondering if there is a way to make it synchronous manually, My JavaScript looks like this, var trans =…
peter
  • 13,009
  • 22
  • 82
  • 142
14
votes
4 answers

IndexedDB performance

Can anyone point me to an article on, or preferably provide some experience of performance of IndexedDB (ideally in Chrome) - what is the fetch, insert and update performance like? There seems to be reasonable amount of opinion that its pretty much…
Sidebp
  • 770
  • 1
  • 10
  • 26
14
votes
2 answers

Safely storing data in a HTML5 iOS application - are localStorage / WebSQL / IndexedDB appropriate?

I'm writing a HTML5 application that I want to release on the iOS app store. Either using PhoneGap or wrapped in a UIWebView control. I'm a bit confused about what options I have in terms of storing data for my application. Are using localStorage,…
asgeo1
  • 9,028
  • 6
  • 63
  • 85
14
votes
2 answers

IndexedDB Access Speed and Efficiency

I'm developing an RPG in Dart, and I'm going to use IndexedDB for data persistence. I will have two databases: one for read-only access and one for read-write access where save games will be stored. I was just wondering if I should read required…
Melvin Sowah
  • 700
  • 1
  • 10
  • 29
14
votes
1 answer

How to search indexeddb for a string

I am trying to set up a search feature on my site, i'm trying to find IndexedDB code for SELECT "column" FROM "table" WHERE "column" LIKE "%keyword%" i found a solution in IndexedDB Fuzzy Search db.transaction(['table'], 'readonly') …
Chito Adinugraha
  • 1,220
  • 2
  • 15
  • 21
14
votes
2 answers

Is it possible for a Chrome extension to access an IndexedDB database created by a specific domain?

If http://example.com/ creates an IndexedDB database, is it possible for a Chrome extension (used on domains other than example.com) to open and query this database?
Alf Eaton
  • 5,226
  • 4
  • 45
  • 50
14
votes
3 answers

Processing a large (12K+ rows) array in JavaScript

The project requirements are odd for this one, but I'm looking to get some insight... I have a CSV file with about 12,000 rows of data, approximately 12-15 columns. I'm converting that to a JSON array and loading it via JSONP (has to run…
S16
  • 2,963
  • 9
  • 40
  • 64
13
votes
1 answer

InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing with ios safari

I have issue since Aug 2020 and i still don't know how to reproduce, I am using dfahlander/Dexie.js to use browser indexedDB. This is sample of how i am using dexie:- import db from "./db"; import { useState, useEffect } from "react"; import axios…
Q8root
  • 1,243
  • 3
  • 25
  • 48
13
votes
1 answer

Parsing FB-Purity's Firefox idb (Indexed Database API) object_data blob from Linux bash

From a Linux bash script, I want to read the structured data stored by a particular Firefox add-on called FB-Purity. I have found a folder called…
Nicolas Raoul
  • 58,567
  • 58
  • 222
  • 373
13
votes
9 answers

How do you delete the indexed databases stored on your computer in Firefox?

In Opera you can simply type in opera:webdatabases in the address field and delete all the web SQL databases stored on your computer. How do you do the same in Firefox? I need to delete an IndexedDB on my localhost to experiment with a fresh…
Aadit Shah
  • 181
  • 1
  • 1
  • 5
13
votes
2 answers

Syncing PouchDB offline to PostgreSQL

I am trying to make my web application work on offline mode by using pouchDB. but the backend database server i used is PostgreSQL (NoSQL). I couldn't find a way to Sync my PouchDB data to postgreSQL when my app came back to online. Can anyone…
isc
  • 526
  • 1
  • 5
  • 17
13
votes
4 answers

IndexedDB: When to close a connection

I would like to know what the correct place to close a connection to the database is. Let's say that I have the following piece of code: function addItem(dbName, versionNumber, storeName, element, callback){ var requestOpenDB =…
NataliaT
  • 139
  • 1
  • 3