Storing information in the DOM?

Question

Im making a small private message application in the form of a phone. Ten messages are shown at the time. And the list of messages are scrolled up/down by hiding them.

Just how bad is it to use the DOM to store information in this way. My main goal for doing this is to reduce calls to the database. And instead of making a new call all the time, it only checks if any new messages has arrived and ads the new message(s).

Whats the alternative, cookies anyone?

Thank you for the time

EDIT: To clarify The messages (id, title, date, from, content) is stored in a ul list, when scrolled the first and the last is hidden/shown. 10 elemnts is shown at the time.

Answer 1

jquery has a store function.

Answer 2

By "using the DOM to store information", do you just mean hiding elements and showing them later? In that case, I think it's just fine. There's no need to fetch things one at a time if you can fetch ten and just reveal them one at a time.

Answer 3

How many are you actually displaying at a time? Do you mean you fetch 20 and only display 1? or 5?

I would make a DIV with overflow: scroll, and let the user scroll up and down. Or use overflow: hidden and add some JavaScript to move it up and down however you like. Then you only need to manipulate the DOM when somebody goes past what you've pulled up and you need to pull more.

If you want to do it with the DOM, just change the CSS of a particular message to display: none to hide things as needed. Unless these messages are huge or something I see no problem with pulling a bunch of them from the DB and hiding/showing them as needed.