DataTables and LocalStorage - possible bug?

emmy

Hi all,

So I ran in to an issue that was driving me crazy, and I finally figured it out. Not sure if this is a bug or not, but here's the scenario.

1) I'm using the latest version of DataTables.
2) I'm using jQuery 1.9.
3) Issue occurred in both Chrome and Firefox.
4) I have NOT configured DataTables to specifically use LocalStorage for anything.
5) I am using client-side processing.

Symptoms:

I had a table that would work fine in a fresh browser session, but at some point it would stop loading data in to the table randomly. The REST API was still called, the data was valid, but it simply would not display. debug.datatables.net wouldn't show any issue (and showed the data was correctly parsed), but on screen the table would be empty, with a stuck "Processing..." if bProcessing was true. If I cleared the browser cache it would fix the problem until it would randomly start doing it again.

Solution:

I finally spent a few hours trying to track it down. Checking all the usual items was not finding any issues, but eventually I stumbled on a mouse movement that seemed to cause it. My application utilizes panels which are sortable. I found that moving one of the panels, even slightly, would cause the issue every time! Looking closer at what was going on, I finally tracked it down to Local Storage - every time a panel was moved on that page, a key was getting stored thus:

http://my.app.url/path/to/page = [[{"id":"some-id"}]]

Whenever this was set, any DataTables on that specific /path/to/page would not render any data. I delete that key via Inspect or Firebug, and instantly a reload of the page renders the data.

This seems to be specifically a rendering issue - the data is definitely getting pulled in, it just doesn't get displayed.

Removing the "id" value specifically seems to resolve it. For example, having the same key equal "[[]]" loads data normally.

Anyway, I'm not sure if this is a bug (i.e. datatables looking at localstorage, seeing a key called "id", and trying to do something with it), or something do with my specific implementation - but I thought I'd report it anyway!

Thanks!

S.

allan

Hi,

Very interesting - thanks for letting me know about this. Are you able to give me a link to the page so I can trace it through in the code?

Thanks,
Allan

emmy

Hi Allan,

Unfortunately it's an internal site that has some security considerations. I can give you any additional info you need though?

Thanks!

S.

allan

When the processing message is stuck on screen it normally means a Javascript error has occurred. Was that the case here? If so, what was the error?

Also, what is the localStorage key (Object.keys(localStorage)) that DataTables is using, and the contents of that key (localStorage.getItem(...)).

Thanks,
Allan