Should I store data in a Javascript object, or just use the table on the screen?

Question

I have a pretty big chat app I'm working on, and had a question about best practices for JS data storage...

I have a table populated with AJAXed data from the server, and the Javascript gets some info from that, and also from an internal object, also populated with AJAXed data. I was starting to store information about each chat in an object, like user status, name, etc., and realized... I have this table right here that I can use as data storage. It's persistent, it stays there at least as long as they're in the chat, so why not just add some hidden TDs or spans to it to hold this data, rather than dealing with a Javascript object? I don't know if there'd be a noticeable change in speed (dealing with an object vs having to parse ID tags and strings), but I was just wondering if there was any fundamental reason why using the table for data storage was A Bad Thing.

And, on the flip side, should I cease looking up data using the table altogether, and instead store all the data in an object (along with displaying it in the table)? Or is my current hybrid system (looking up in table for things that are in the table; using an object for things that aren't, rather than using hidden spans/tds) pretty good?

Answer 1

I was just wondering if there was any fundamental reason why using the table for data storage was A Bad Thing.

I'd say it's fundamentally "bad" for the same reasons we strive not to mingle javascript or css in with the markup. The page HTML should be used for presentation purposes only. I don't think there's going to be a huge difference performance wise whether you use the table or a javascript object, but the javascript object would be much cleaner, IMO.

Answer 2

Populating the table, whether using innerHTML or DOM methods, is going to be worse performance-wise. Retrieving the data (particularly if via iteration) also becomes less verbose, easier to maintain and, again, better performance-wise. Using an HTML table is also a more fragile option, as if something goes wrong, other markup on the page could become invalid or, worse, it might end up displayed to the user.

There's also the simple fact it just seems hacky, workaroundy and dirty. It's an HTML table that is to present tabular data, it's not an SQL table for data storage.

JavaScript objects are pretty much made for what you're describing. Using an object makes even more sense and is a nice and clean option if the data you're getting from the server is already in a suitable form (i.e. JSON). Then it's ready for you and all you have to do is parse it.

Answer 3

Set eg. each <tr> element to have a custom property eg .customData and place your javascript object there. Its a nice compromise - the data is seperated from the markup but directly related in the dom.

Answer 4

Storing the data in an object would make it easier to manage, but it would be good practice to also store a reference alongside of that to the element (makes crud easier).