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
130
votes
4 answers

How is indexedDB conceptually different from HTML5 local storage?

Both indexedDB and local storage are key value stores. What is the advantage of having two key/value stores? indexedDB is asynchronous, but joins (the most time-consuming thing) are manual. They appear to run in the same thread as the async…
Samuel Danielson
  • 5,231
  • 3
  • 35
  • 37
112
votes
4 answers

Storing Image Data for offline web application (client-side storage database)

I have an offline web application using appcaching. I need to provide it about 10MB - 20MB of data that it will save (client-side) consisting mainly of PNG image files. The operation is as follows: Web application downloads and installs in appcache…
Dr.YSG
  • 7,171
  • 22
  • 81
  • 139
102
votes
20 answers

How to delete indexedDB?

I'm working in a project which involves using IndexedDB. As I'm begining to know this technology, I need to be able to delete an indexedDB by hand so I can start over. I found the way to do it in Firefox, but I can't find the way for Google…
PaquitoSoft
  • 3,177
  • 6
  • 29
  • 32
86
votes
3 answers

Maximum item size in IndexedDB

I'm working on a simple web utility that makes use of IndexedDB (similar to a key-value DB) feature of HTML5. I was looking for but I was unable to know: what is the maximum size I can store in an item?
acanimal
  • 4,800
  • 3
  • 32
  • 41
74
votes
7 answers

Developing a HTML5 offline storage solution for iOS/Android in 2011

The problem: I need a device agnostic (e.g. HTML5) solution for storing and querying 250,000+ rows of data offline on a phone or tablet type device (e.g. iOS/Android). The idea being I have people working in remote areas without any cellular data…
zuallauz
  • 4,328
  • 11
  • 43
  • 54
56
votes
2 answers

How can I remove a whole IndexedDB database from JavaScript?

How can one remove a whole IndexedDB database from JavaScript, as opposed to just an object store? I'm using the IndexedDB shim, which may use WebSQL as its backend. I'd mainly like to know how to do this for the PhantomJS (headless) browser,…
aknuds1
  • 65,625
  • 67
  • 195
  • 317
52
votes
3 answers

How to access Google Chrome's IndexedDB/LevelDB files?

I want to use Google Chrome's IndexedDB to persist data on the client-side. Idea is to access the IndexedDB outside of chrome, via Node.JS, later on. The background is the idea to track usage behaviour locally and store the collected data on the…
Chris
  • 2,296
  • 4
  • 27
  • 46
49
votes
10 answers

React-native bundling failure. ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist":

ERROR MESSAGE IN QUESTION: While trying to resolve module idb from file C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\@firebase\app\dist\esm\index.esm2017.js, the package…
JohnyClash
  • 630
  • 1
  • 5
  • 10
45
votes
6 answers

HTML5 IndexedDB, Web SQL Database and browser wars

I'm starting the development of a web app with offline database storage requirements. Long story short, the app should be able to run on: One of the major desktop browsers, Chrome preferred Safari on iOS Android's native browser (based on V8 and…
ivo
  • 4,101
  • 5
  • 33
  • 42
45
votes
5 answers

In IndexedDB, is there a way to make a sorted compound query?

Say a table has, name, ID, age, sex, education, etc. ID is the key and the table is also indexed for name, age and sex. I need all male students, older than 25, sorted by their names. This is easy in mySQL: SELECT * FROM table WHERE age > 25 AND…
jason
  • 3,471
  • 6
  • 30
  • 43
42
votes
1 answer

Best IndexedDB Wrappers

I am just exploring various options for IndexedDB Wrapper and i've come across quite a few options as follows: YDN JQuery IndexedDb Plugin IDB Wrapper DB.js But I am unable to find out which one of these is the best one? I want to use IndexedDB…
rh979
  • 657
  • 1
  • 5
  • 13
40
votes
2 answers

When should I use Web SQL versus IndexedDB?

Recently, I have come across the Web SQL and IndexedDB APIs that are provided by browsers. What are the use cases for Web SQL and IndexedDB and when should I use one over the other?
Utsav Sinha
  • 605
  • 1
  • 5
  • 12
39
votes
6 answers

Storage limits on Chrome browser

What is the soft limit (at which the user needs to give permission to exceed)? What is the hard limit (maximum allowed).
Clay Nichols
  • 11,848
  • 30
  • 109
  • 170
38
votes
1 answer

Conceptual problems with IndexedDB (relationships etc.)

I'm writing a thesis about offline abilities of web applications. My task is to show the possibilities of offline storage through a web application with a server-side relational database and Ajax/JSON traffic between client and server. My first…
Felix
  • 769
  • 1
  • 7
  • 8
37
votes
5 answers

Query using multiple conditions

I recently discovered (sadly) that WebSQL is no longer being supported for HTML5 and that IndexedDB will be replacing it instead. I'm wondering if there is any way to query or search through the entries of an IndexedDB in a similar way to how I can…
jthereliable
  • 473
  • 1
  • 5
  • 5
1
2 3
99 100