Revision 1028984 of IDBVersionChangeEvent

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

<p>The <strong><code>IDBVersionChangeEvent</code></strong> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB&nbsp;API</a> indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.</p>

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

<div class="note">
<p><strong>Note</strong>: The specification has changed and some not up-to-date browsers only support the deprecated unique attribute, <code>version</code>, from an early draft version.</p>
</div>
<!-- This interface no longer exists <p>Inherits from:&nbsp;<a href="mks://localhost/en/IndexedDB/IDBEvent" title="en/IndexedDB/IDBEvent">IDBEvent</a></p> -->

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{ domxref("IDBVersionChangeEvent.oldVersion") }} {{readonlyInline}}</dt>
 <dd>Returns the old version of the database.</dd>
 <dt>{{ domxref("IDBVersionChangeEvent.newVersion") }} {{readonlyInline}}</dt>
 <dd>Returns the new version of the database.</dd>
</dl>

<h3 id="Deprecated_properties">Deprecated properties</h3>

<dl>
 <dt>{{ domxref("IDBVersionChangeEvent.version") }} {{readonlyInline}} {{ Deprecated_inline("") }}</dt>
 <dd>
 <p>The new version of the database in a <a href="/en/IndexedDB/IDBTransaction#VERSION_CHANGE" title="en/IndexedDB/IDBTransaction#VERSION CHANGE">versionchange</a>&nbsp;transaction.</p>

 <div class="warning">
 <p><strong>Warning</strong>: While this property is still implemented in older browsers, the latest specification replaces it with the <code>oldVersion</code> and <code>newVersion</code> attributes. See the compatibility table to know what browsers support them.</p>
 </div>
 </dd>
</dl>

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

<p>In the following code snippet, we make a request to open a database, and include handlers for the success and error cases. Upon a version change (after an <code>upgradedneeded</code> event), the <code>success</code> event will implement the <code>IDBVersionChangeEvent</code> interface. 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', '#idl-def-IDBVersionChangeEvent', 'IDBVersionChangeEvent')}}</td>
   <td>{{Spec2('IndexedDB')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

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

<p>{{ CompatibilityTable() }}</p>

<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><code>version</code></td>
   <td>12 {{property_prefix("webkit")}}</td>
   <td>
    <p>From {{ CompatGeckoDesktop("2.0") }} to</p>

    <p>{{ CompatGeckoDesktop("9.0") }} {{property_prefix("moz")}}</p>
   </td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td><code>oldVersion</code></td>
   <td>23{{property_prefix("webkit")}}<br />
    24</td>
   <td>
    <p>{{ CompatGeckoDesktop("10.0") }} {{property_prefix("moz")}}<br />
     {{CompatGeckoDesktop("16.0")}}</p>
   </td>
   <td>10, partial</td>
   <td>15</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>newVersion</code></td>
   <td>23{{property_prefix("webkit")}}<br />
    24</td>
   <td>
    <p>{{ CompatGeckoDesktop("10.0") }} {{property_prefix("moz")}}<br />
     {{CompatGeckoDesktop("16.0")}}</p>
   </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&nbsp;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>{{ CompatNo() }}</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>



<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><a href="/en-US/docs/Web/API/IDBDatabase/onversionchange">IDBDatabase.onversionchange</a></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>