Christophe Christophe - 1 year ago 58
Javascript Question

Hidden html table for data storage

I have built a one page web application that manipulates a set of data:


  • 2,000 to 3,000 items

  • each item has the same properties: State, City, Street, Zip code



I am currently retrieving the data via AJAX and storing them in an array of objects (each array element is an object with key/value for State, City, Street, Zip code).

I am considering modifying my code, to store my items in a hidden html table instead:


  • one row per item

  • one column per property (State, City, Street, Zip code)



The main benefit I see: when they work offsite, the users can save my page to work offline, as the hidden table is part of the DOM.

A table is also a convenient format, all browsers understand it (I need to support IE 7), and each cell is easy to access by its coordinates (rows[i].cells[j]).

I am a little bit concerned with performance for DOM traversing, but I am thinking that I could have the table detached from the DOM, and only attach it when users save the page.

Am I missing something? Is there any reason in my case why using a hidden table for data storage wouldn't be a good idea?

Answer Source

Use JSON. It is by far the most efficient and fastest way to access data on the client. Travering a DOM using a table would be an order of magnitude slower. You can easily save your JSON data as a text blob in any database or storage system as well.

The EXT.js framework uses JSON extensively and I've found it to be a great tool for the job.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download