Hidden html table for data storage

Question

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 1

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.

Answer 2

If you're using .NET you can do put this in the head of the page with a literal.

JSON on Pageload

<script type="text/javascript">

    var table1 = [      
    // First Row
    {"Column1" : "Col1Data", 
      "Column2" : "Col2Data",
     "Column3" : "Col3Data" },

    // Second Row
    {"Column1"  : "Col1Data",  
     "Column2" : "Col2Data",
     "Column3" : "Col3Data" }
     ]

</script>

Then you can access the data with:

table1[rowNum].ColumnName;