Webix offers a simple way for efficient work with IndexedDB in-browser storage.
Complying with Webix concept of serverside proxy objects IndexedDB support is implemented via indexdb proxy object that contains necessary logic for creating databases as well as working with existing ones.
Webix indexdb proxy object is used for:
Indexdb proxy object features three built-in methods:
To load data from an existing IndexedDB database, provide its name together with an objectstore name according to the following pattern: indexdb->db_name/store_name.
Both database and objectstore names are must-have paramaters:
{
view:"datatable",
id:"datatable",
url:"indexdb->mydb/mycollection"
}
//or, for loading data after component init
$$("datatable").load("indexdb->mydb/mycollection");
Related sample: Connector DataTable loading
Component's url property as well as load method define datasource. In case of IndexedDB, they call load method of an indexdb proxy object and pass database and objectstore names into it.
To save changes performed over component data, you need to pass database and objectstore names into the component's save property according to the following pattern: indexdb->db_name/store_name:
{
view:"datatable",
url:"indexdb->mydb/mycollection",
save:"indexdb->mydb/mycollection"
}
Related sample: Connector DataTable saving
Component's save property calls save method of an indexdb proxy object.
The indexdb proxy allows using its methods directly. For instance, you can call create method with the following code:
webix.proxy.indexdb.create(dbname, collection_data, dbversion, callback);
Where:
Here's an example of a function call, where mydb database with mycollection objectstore is created and data is loaded to the objectstore.
webix.proxy.indexdb.create("mydb", {
mycollection:[
{"id":1,"title":"The Shaushenk Redemption ","year":"1998","votes":194865,"rating":"7.5","rank":1},
{"id":2,"title":"The Godfather","year":"1975","votes":511495,"rating":"9.2","rank":2},
{"id":3,"title":"The Godfather: Part II","year":"1974","votes":319352,"rating":"9.0","rank":3},{"id":4,"title":"The Good, the Bad and the Ugly","year":"1966","votes":213030,"rating":"8.9","rank":4},
{"id":5,"title":"My Fair Lady","year":"1994","votes":533848,"rating":"9.1","rank":5},{"id":6,"title":"12 Angry Men","year":"1957","votes":164558,"rating":"8.9","rank":6}
],
//mycollection2:[data], //as many stores as you like
//mycollection2:[data]
}, null, init_demo);
Related sample: Connector DataTable loading
Webix data loading pattern in described separately.
Back to top