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?

Solution

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.