Will be removed in Webix 7.0.
Webix offers a simple way for efficient work with IndexedDB in-browser storage.
Complying with the Webix concept of server-side proxy objects, IndexedDB support is implemented via the indexdb proxy object, that contains necessary logic for creating databases as well as working with existing ones.
Webix indexdb proxy object is used for:
The indexdb proxy object features three built-in methods:
To load data from an existing IndexedDB database, provide its name together with the the name of objectstore according to the following pattern: indexdb->db_name/store_name.
The names of database and objectstore are must-have parameters:
{
view:"datatable",
id:"datatable",
url:"indexdb->mydb/mycollection"
}
//or, for loading data after component initialization
$$("datatable").load("indexdb->mydb/mycollection");
Related sample: Connector DataTable Loading
Component's url property as well as load method define data source. 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 the names of the database and objectstore 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 the save method of an indexdb proxy object.
The indexdb proxy allows using its methods directly. For instance, you can call the 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 Shawshank 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