Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

DataStore.onchange

This API is available on Firefox OS for internal applications only.

The onchange event handler of the DataStore interface fires when a change is made to the data store. Its main use is to synchronize different apps that are using the data store when a change is made. When fired, this event returns a DataStoreChangeEvent, which can be used to handle the change that was just made. Alternatively, when the event fires you could create a DataStoreCursor and iterate through all the records, if needed.

Note: The Data Store API is available in Web Workers, from Firefox 32 onwards (Firefox OS 2.0; see bug 949325.)

Syntax

store.onchange = function() {
  // run some code to sync apps that use the data store
}

Example

This section shows two approaches to handling the same problem — syncing data when another application makes a change to the data store.

In our first snippet, we retrieve all the data stores on the device with the name "contacts", then we use DataStore.sync to create a cursor to use for syncing the app with the current "content" data store (displaying new items, etc.) This cursor is passed to the runNextTask() function that will deal with running through the updates in some way. Next, we include some code inside an onchange function so that when a change is made we return the DataStoreChangeEvent, find out what type of task the change was, and then take action based on this type (either adding or deleting a contact's information.)

navigator.getDataStores('contacts').then(function(stores) {
  var cursor = stores[0].sync();
  runNextTask(cursor);

  stores[0].onchange = function(e) {
    if (e.operation == 'removed') {
      // Delete the contact
      deleteContact(e.id);
    }

    if (e.operation == 'added') {
      stores[0].get(e.id).then(function(obj) {
        // Add the new contact
        loadData(obj,e.id);
      });
    }
  }
});

Note: To see this code used in the context of a complete app, check out our The Data Store Contacts Viewer example changeevent version on Github.

In the second snippet, we retrieve all the data stores on the device with the name "contacts", then we use DataStore.sync to create a cursor to use for syncing the app with the current "content" data store (displaying new items, etc.) This cursor is passed to the runNextTask() function that will deal with running through the updates in some way. Next, we include the same code inside an onchange function , so that if a change is made to the data store by any app that uses it, the syncing process will be run again.

navigator.getDataStores('contacts').then(function(stores) {
  var cursor = stores[0].sync();
  runNextTask(cursor);

  stores[0].onchange = function() {
    contactList.innerHTML = '';
    var cursor = stores[0].sync();
    runNextTask(cursor);
  }
});

Note: To see this code used in the context of a complete app, check out our The Data Store Contacts Viewer example on GitHub.

Specifications

Specification Status Comment
Data Store API
The definition of 'onchange' in that specification.
Draft  

The discussion concerning this API's creation happened in various Mozilla mailing lists and other places. A summary of the discussion and further pointers can be found on the Mozilla Wiki. For further feedback and questions, send mail to the dev-webapi mailing list.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support No support No support No support No support
Feature Android Chrome Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support No support No support No support 1.0.1 No support No support No support
Available in web workers No support No support No support 2.0 No support No support No support

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, fscholz
 Last updated by: chrisdavidmills,