Webix Storage Interface

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 the following objects:

• webix.storage.local - works with window localStorage object;
• webix.storage.session - works with window sessionStorage object;
• webix.storage.cookie - works with document cookie object.

The objects share three methods:

• put(name, data, [domain, expires]) - the last two parameters concern only cookie storage. The method allows putting data to browser cache under the stated name. Data is passed as JSON object;
• get(name) - the method derives stored data from local cache for further usage. Data comes in JSON format;
• remove(name, [domain]) - the last parameter concerns only cookie storage. The method removes data saved under the stated name from local cache.

Working with Local Storage

Local storage can be used for storing any data of an application, e.g. the current state of a component derived with getState() method.

To do this, you put() state object into Webix local storage under a custom name. The data you save should be in the JSON format (which is exactly what getState() returns).

function save_state(){
    webix.storage.local.put("state", grid.getState());
}

If the data you'd like to save is a plain JavaScript object, apply Webix serialize() method to it.

To retrieve data from a local storage, use the get() method pointing to the name under which you've saved 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.

Working with Cached Data

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"));            
                }       
            }); 
        }
    } 
});

• onAfterEditStop event is used to catch data changes and put edited data to cache;
• cached data is inline data, that's why it is parsed into a component, not loaded.

Making Names of Stores Unique

The webix.storage module provides the prefix() function to help you avoid possible collisions. It allows you to make the name of the store more unique by upgrading any existing storage (local, session or cookie) with an auto-prefixing functionality.

The method takes two parameters:

• scope - the id of the store
• storage - the local storage

mystore = webix.storage.prefix("app_id", webix.storage.local);
// putting data into the local cache under the name "app_id_session_key"
mystore.put("session_key", 12)
mystore.get("session_key") // getting data from the local storage  
// -> 12

Back to top