# qooxdoo

Home » Manual (v2.1.1) » Core » Data Binding » Stores

# Stores

The main purpose of the store components is to load data from a source and convert that data into a model. The task of loading data and converting the data into a model has been split up. The store itself takes care of loading the data but delegates the creation of model classes and instances to a marshaler. More information about the marsahling and the models itself can be found in the models section.

## JSON Store

The JSON store takes an URL, fetches the given data from that URL and converts the data using the JSON marshaler to qooxdoo model instances, which will be available in the model property after loading. The state of the loading process is mapped to a state property. For the loading of the data, a `qx.io.request.Xhr` will be used in the store.

The following code shows how to use the JSON data store.

    var url = "json/data.json";
    var store = new qx.data.store.Json(url);

After setting the URL during the creation process, the loading will begin immediately. As soon as the data is loaded and converted, you can access the model with the following code.

    store.getModel();

## JSONP Store

The JSONP store is based on the JSON store but uses a script tag for loading the data. Therefore, a parameter name for the callback and an URL must be specified.

The following code shows how to use the JSONP data store.

    var url = "json/data.json";
    var store = new qx.data.store.Jsonp(url, null, "CallbackParamName");

After setting the URL and the callback parameter name during the creation process, the loading will begin immediately.

## YQL Store

YQL is the Yahoo! Query Language. Yahoo! describes it as "[...] an expressive SQL-like language that lets you query, filter, and join data across Web services." Based on the JSONP store, qooxdoo offers a YQL store, where you can specify the YQL queries and qooxdoo handles the rest.

The following code demonstrates how to fetch some twitter messages.

    var query = "select * from twitter.user.timeline where id='wittemann'";
    var store = new qx.data.store.Yql(query);

## Offline Store

The Offline store uses HTML local or session storage to store the data on the client. That can be used for offline storage as well as for other storage purposes on the client. You should use the Environment checks to make sure that the used storage technology is supported by the environment you want to run your code in.

The following code demonstrates how to initialize the data store.

    if (qx.core.Environment.get("html.storage.local") {
      var store = new qx.data.store.Offline("my-test-key", "local");
      if (store.getModel() == null) {
        // initialize model ...
      }
    }

## Combining with controllers

As described in the section above, you can access the model in the property after loading. The best solution is to use the model with a controller and then bind the the model properties with Single Value Binding together. The code for this could look something like this.

    store.bind("model", controller, "model");

Using the Single Value Binding, the binding handles all the stuff related with the loading of the model data. That means that the data will be available in the controller as soon as its available in the store.