Webix Storage Interface

Webix library offers its own API for working with browser storages, namely: Local Storage, Session Storage and Cookie.

Accordingly, the 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 the following methods:

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

The storage.cookie module possess one more method:

• getRaw (string) - expects the data key name as a parameter and returns a data item from the storage under the key passed.

Note that the cookie is returned as a raw string, so if you need to receive the unescaped JSON data, use the get method.

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 would like to save is a plain JavaScript object, apply Webix serialize() method to it.

To retrieve data from the 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

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 storage    
                    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 storage
• cached data are inline data, that's why it is parsed into a component, not loaded.

Making Names of Storages Unique

The webix.storage module provides the prefix() function to help you avoid possible name 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 Local Storage 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