Webix library offers its own API for working with application cache and browser local storages - permanent cache, per session cache and cookies.
Accordingly, webix.storage module contains three objects:
The objects share three methods:
Local storage can be used for storing any application data, e.g. current state of a component derived with getState() method.
To do this, you put() state object into Webix local storage under a custom name. Data you save should be in JSON format(which is exactly what getState() returns).
function save_state(){
webix.storage.local.put("state", grid.getState());
}
If data you'd like to save is plain Javascript object, apply Webix serialize() method to it.
To retrieve data from local storage, use get() method pointing to the name under which you've save this or that data.
function restore_state() {
var state = webix.storage.local.get("state");
if (state)
grid.setState(state);
}
Related sample: DataTable state object::Session
To save and track state of a multiview-based app, follow other instructions.
Local storage interface can be used for storing serverside data in case of disconnect, which ensures that local changes won't be lost even after page refresh.
Local storage functionality is set by adding a prefix of desired mode - cache or offline to you load and save scripts.
webix.ui({
view:"datatable",
..config..
url:"offline->load.php",
save:"offline->save.php"
});
In either of these modes, serverside data is loaded to a component, and is additionally cached to your machine( webix.local.put() function is executed in background).
What happens next depends on the chosen mode:
Offline mode:
Cache mode:
Local mode:
Read also main Offline Support article.
Although Webix library offers a ready-to-use solution, you can write your own proxy object to enable offline support and set it as the component's url property:
webix.ui({
view:"datatable",
..config..
url:{
$proxy: true,
load: function(view) {//save data after editing
view.attachEvent("onAfterEditStop", function(){
webix.storage.local.put("app_data", this.serialize());
});
view.load("data/data.json", {
success: function(text){//fresh data, save in cache
webix.storage.local.put("app_data", text)
},
error: function(){ //probably in offline mode
view.parse(webix.storage.local.get("app_data"));
}
});
}
}
});