Revision 936543 of IDBFactory.open()

<p>{{APIRef("IndexedDB")}}</p>

<div>
<p>The <strong><code>open()</code></strong> method of the {{domxref("IDBFactory")}} interface requests opening a <a href="/en-US/docs/IndexedDB#gloss_database_connection">connection to a database</a>.</p>

<p>The method returns an {{domxref("IDBOpenDBRequest")}} object immediately, and performs the open operation asynchronously. If the operation is successful, a <code>success</code> event is fired on the request object that is returned from this method, with its <code>result</code> attribute set to the new {{domxref("IDBDatabase")}} object for the connection.</p>
</div>

<p>If an error occurs while the database connection is being opened, then an <a href="/en-US/docs/IndexedDB/IDBErrorEvent">error event</a> is fired on the request object returned from this method.</p>

<p>May trigger&nbsp;<code>upgradeneeded</code>, <code>blocked</code> or <code>versionchange</code> events.</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="Syntax">Syntax</h2>

<p>For the current standard:</p>

<pre class="brush: js" style="font-size: 14px; word-spacing: 0px;">
request = window.indexedDB.open(name[, version])
</pre>

<p>For the experimental version with <code>options</code> (see below):</p>

<pre class="brush: js" style="font-size: 14px; word-spacing: 0px;">
request = window.indexedDB.open(name[, options])
</pre>

<h3 id="Parameters" style="line-height: 30px; font-size: 2.14286rem;">Parameters</h3>

<dl>
 <dt>name</dt>
 <dd>The name of the database.</dd>
 <dt>version</dt>
 <dd>Optional. The version to open the database with. If the version is not provided and the database exists, then a connection to the database will be opened without changing its version. If the version is not provided and the database&nbsp;does not exist, then it will be created with version <code>1</code>.</dd>
 <dt>options (version and storage) {{ Non-Standard_inline() }}</dt>
 <dd>Optional. In Gecko, since&nbsp;<a href="/en-US/Firefox/Releases/26">version 26</a>, you can include a non-standard&nbsp;<code>options</code>&nbsp;object as a parameter of {{ domxref("IDBFactory.open") }} that contains the&nbsp;<code>version</code>&nbsp;number of the database, plus a storage value that specifies whether you want to use&nbsp;<code>persistent</code> or&nbsp;<code>temporary</code>&nbsp;storage.</dd>
</dl>

<div class="note">
<p><strong>Note</strong>: You can find out more information on the different available storage types, and how Firefox handles client-side data storage, at <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>.</p>
</div>

<h3 id="Returns">Returns</h3>

<p>A {{domxref("IDBOpenDBRequest")}} object on which subsequent events related to this request are fired.</p>

<h3 id="Exceptions">Exceptions</h3>

<p>This method may raise a {{domxref("DOMException")}} with a <a href="/en-US/docs/DOM/DOMError">DOMError</a> of the following types:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col" width="131">Exception</th>
   <th scope="col" width="698">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>TypeError</code></td>
   <td>The value of version is zero or a negative number or not a number.</td>
  </tr>
 </tbody>
</table>

<h2 id="Example">Example</h2>

<p>Example of calling <code>open</code> with the current specification's <code>version</code> parameter:</p>

<pre class="brush: js" style="font-size: 14px; word-spacing: 0px;">
var request = window.indexedDB.open("toDoList", 4);</pre>

<p>Example of calling <code>open</code> with the <code>options</code>&nbsp;parameter:</p>

<pre class="brush: js" style="font-size: 14px; word-spacing: 0px;">
var request = window.indexedDB.open("toDoList", {version: 4, storage: "temporary"});</pre>

<p>In the following code snippet, we make a request to open a database, and include handlers for the success and error cases. For a full working example, see our <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> app (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>.)</p>

<pre class="brush:js">
var note = document.querySelector("ul");

// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)

// Let us open version 4 of our database
var DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these two event handlers act on the database being opened successfully, or not
DBOpenRequest.onerror = function(event) {
&nbsp; note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
};
&nbsp;
DBOpenRequest.onsuccess = function(event) {
&nbsp; note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
&nbsp;&nbsp; &nbsp;
&nbsp; // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike.
&nbsp; db = DBOpenRequest.result;
};
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}}</td>
   <td>{{Spec2('IndexedDB')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>23{{property_prefix("webkit")}}<br />
    24</td>
   <td>10 {{property_prefix("moz")}}<br />
    {{CompatGeckoDesktop("16.0")}}</td>
   <td>10, partial</td>
   <td>15</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("37.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.4</td>
   <td>{{CompatGeckoMobile("22.0")}}</td>
   <td>1.0.1</td>
   <td>10</td>
   <td>22</td>
   <td>8</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("37.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div class="warning">
<p>Be careful in Chrome as it still implements the old specification along with the new one. Similarly it still has the prefixed <code>webkitIndexedDB</code> property even if the unprefixed <code>indexedDB</code> is present.</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
 <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
 <li>Using transactions: {{domxref("IDBTransaction")}}</li>
 <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
 <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
 <li>Using cursors: {{domxref("IDBCursor")}}</li>
 <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
</ul>