webstorage & serialisation of the object returned by the new jquery detach method

Question

I'm developping a small web client application using jquery

The App at the first page of session contains only the app menu which trigger ajax requests, display data received in a new tab (within the page) and set event handlers via callbacks.

When the user have more than one tab opened, the tab(s) not focused are detached from the DOM using $(tab).detach(), & the returned object is stored in an array until the tab regain focus (object is then append back to the DOM).

The magic of detach is that the object returned contains all the event handlers bind to all the html elements within (so when we append it back we don't have to rebind nothing) Which is great&fast, except that i cannot manage to serialize that object (and store it to recover the tabs opened when the user is browsing on a different page of the site). I could find the html, but the event handlers ... ?

$panels.panel[el]=$("#"+el).detach();

alert(itobj($panels.panel[el]));  //->  key: 0 value: [object HTMLDivElement]
alert($panels.panel[el].html());  //-> return the innerhtml

sessionStorage.setItem(el,$.toJSON($panels.panel[el]));

alert(sessionStorage.getItem(el));  //-> {"length":1,"0":{},"context":{"jQuery17204145571568968498":1,"location":{}},"selector":"#panelid"}

So how could those event handlers be recovered by the session ? does it have anything to do with the context ? Or is there a better way to serialize (have been using toJSON from : http://code.google.com/p/jquery-json/ )?

Any help very appreciated, so thanks a tun (the idea of keeping track of all the callbacks to recall them is highly depressing - & making useless the magic of detach)

score 0 · Accepted Answer · edited May 23 '17 at 12:04

to access events handler properties

 var elem = $('#someid')[0];

 var data = jQuery.hasData( elem ) && jQuery._data( elem );

 console.log(data.events);    //-> {"click":[{"type":"click","origType":"click","data":{"length":1,"0":{"jQuery17207324459496430933":45},"context":{"jQuery17207324459496430933":1,"location":{}},"selector":"#pnl_ctbuilder_1"},"guid":25,"selector":".panel_close a","quick":null,"namespace":""}]}

Accessing functions bound to event handlers with jQuery

But and that's the core of the answer : only plain object (no function nor circular reference, no event handlers) are possible to serialize for saving in sessionstore/localstore

So the magic of detach just won't happen with webstorage unfortunately.

webstorage & serialisation of the object returned by the new jquery detach method

1 Answers1