Is it bad to store temporary data into hidden element? [closed]

Question

At one interview, once I attended, I was asked to create one java script based functionality in which I was said to create one form (say i.e first name, last name, email, age) and one listing(actually listing was kind of another form storing multiple entries) below this form. On submitting this form one new row was added to listing. However it is possible to remove any previously added listing row. and after adding removing, finally need to store this final state of listing. ( Kind of form post and server side scripting comes into picture )

So what I did that, On Form submit, adding a new <tr> row in listing table at the same time I serialized all form data except submit button using jQuery serialize and stored it in one hidden element of listing form.

On removing listing row, I was removing <tr> row along with respective hidden element for the same row.

All was working like great without any error. But the interviewer asked me that "The approach I used (hidden elements) was really proper?".

I replied, I could have used json? but Could not crack interview. So I want to know what is best approach that We can use to store data in such conditions?

Answer 1

Another approach for client-side is to keep a list of objects separately and only store the reference to each item inside a property of your DOM element. This approach is very similar to what jQuery's $.fn.data() provides and has these advantages:

1. You don't have to serialize anything, the data stays in its native format; it should be said that you could have achieved this by adding a property as well.

2. All your data is kept in one place instead of scattered around in the DOM.

This is an example implementation:

(function(ns) {  var entries = {}, entryId = 1;  ns.Entries = {    addEntry: function(data) {      entries[entryId] = data;      return entryId++;    },    getEntryById: function(id) {      return entries[id] || null;    } };  }(this)); 

Calling Entries.addEntry returns an identifier that you can store in one of the DOM element's properties:

tr.entryId = Entries.addEntry(data); 

Later you can use that entryId property to find the corresponding data in the entry list and use it.

var data = Entries.getEntryById(tr.entryId); 

Demo

Of course, this particular functionality can also be solved server-side by using sessions.

Answer 2

Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:

• Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.
• Attribute Value The attribute value can be any string.

Using this syntax, we can add application data to our markup as shown below:

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul> 

We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. Imagine that when a user clicks on a vegetable a new layer opens up in the browser displaying the additional seed spacing and sowing instructions. Thanks to the data- attributes we’ve added to our <li> elements, we can now display this information instantly without having to worry about making any Ajax calls and without having to make any server-side database queries.

source: HTML5 Doctor

There are other methods too I believe.

Answer 3

Actually instead of using hidden elements , you can add data to the html elements using jQuery. This is a better approach to make your data a little less obvious/direct to the users. Check the data() in jQuery.