Webix.Proxy

Webix JS
1

Hi,

This proxy feature is a really amazing feature. I’m using the cache mode of this proxy and it’s just awesome.

However, I am running into this error if I try to store large data:
“QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.”

Is there a clever way to compress the data before it’s stored locally? This would help greatly!

Here is an example of what I’m doing:


    var components_proxy = webix.proxy("cache", "/uri.json");
    webix.ui(
      {
          id:"treeTableName",
          view:"treetable",
          url:components_proxy,
          config ...
       }
2

You can redefine method for data storing

webix.storage.local.putA = webix.storage.local.put;
webix.storage.local.put = function(name, data){
    this.putA( name, encode(JSON.stringify(data)) );
}

webix.storage.local.getA = webix.storage.local.get;
webix.storage.local.get = function(name){
    return JSON.parse( decode(this.getA( name )) );
}

where, encode and decode can be any string compression functions ( something like GitHub - nodeca/pako: high speed zlib port to javascript, works in browser & node.js )

3

Hi Maksim,

Thanks a bunch for this. It 100% works.

You guys are total rock stars.

We are using Webix for a project at my work. I’m going to be bugging my boss to get us some premium support from you guys.

You certainly deserve our business!

Sincerest thanks,

Jay

4

This gives me Maximum call stack size exceeded error on the get

5

this gives me Maximum call stack size

Most probably you have called the above code twice.
The code can be rewritten in more safe manner

(function(){

var putA = webix.storage.local.put;
webix.storage.local.put = function(name, data){
    putA.call( this, name, encode(JSON.stringify(data)) );
}
 
var getA = webix.storage.local.get;
webix.storage.local.get = function(name){
    return JSON.parse( decode(getA.call( this,name )) );
}

})();
6

Thanks that worked! But now if I go to another page and return it reloads the data instead of using the saved tree. It loads the saved version and than loads the entire tree again. Is there anyway to fix this?

7

If you are using cache proxy it will prefer to load from cache. You can use offline proxy if you want to load from server side and only when server side is not available, try to use a local cache.

8

webix.proxy(“cache”, “/url”);

This is what I’m using. But it loads it from cache and than loads the entire tree again from server side.

9

This is my script
(function(){
var putA = webix.storage.local.put;
webix.storage.local.put = function(name, data){

  putA.call( this, name, LZString.compressToUTF16(data ));
}

var getA = webix.storage.local.get;
webix.storage.local.get = function(name){
 
  return LZString.decompressFromUTF16(getA.call( this,name ));
}
})();

webix.ready(function(){
var components_proxy = webix.proxy(“cache”, “url”);
webix.ui(
{
id:“componentsContent”,
view:“treetable”,
tooltip:true,
url:url,
container:"#someContainer",
resizeColumn:true,
height:800,
columns:[
{
id:“name”
],
on:{
onAfterOpen: function(id){
var state = this.getState();

        webix.storage.local.put("components_content_treetable_state", state);
      },
      onAfterClose: function(id){
        var state = this.getState();
        webix.storage.local.put("components_content_treetable_state", state);
      },
      onBeforeLoad:function(){
        this.showOverlay("Loading");
      },
      onAfterLoad:function(){
        if (!this.count()){
          this.showOverlay("Nothing to show");
        } else {
          this.hideOverlay();
        }
    },
    // ready: function(id){
    //   alert("On Ready");
    //   var state = webix.storage.local.get("components_content_treetable_state");
    //   if (state){
    //     this.setState(state);
    //   }
    // },
    unload:function(){
      webix.storage.local.put("components_content_treetable_state", $$("componentsContent").getState());
    }
  }
);

});