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?
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.