如何使用HTML5数据属性获取会话属性

Question

I'm new to the front end side of Java EE and HTML5. I have read that you could use the data attribute to read through the DOM. How would you properly use this to get a session attribute already set by java. Compared to the other methods such as using a hidden input.

<input id="sid" type="hidden" name="series" value="${sessionScope.series} />

var sid = document.getElementById("sid"), series;

Answer 1

Use something like this:

<div id="div1" data-special-value="${sessionScope.series}"></div>

And get the attribute value like:

document.getElementById("div1").getAttribute("data-special-value")

Or even ( http://caniuse.com/dataset ):

document.getElementById("div1").dataset("special-value")

Or with jQuery:

$("#div1").attr("data-special-value")
// or
$("#div1").data("special-value")

Although I'm not sure storing a session value on an element is right. It's definitely not wrong, I'm just wondering what you'd need/use it for with sessions. Sessions appear once.

The data-* attributes are more useful with storing related data to something. For example, if you loop through a bunch of database records and print their columns, but want to also store the row's database id once, you'd use:

<c:forEach items="${rows}" var="row">
    <tr data-row-id="${row.id}">
        <td>${row.name}</td>
        <td>${row.description}</td>
    </tr>
</c:forEach>

Then if you want to get the original row.id value, it's stored in one place an encompasses everything it pertains to (the columns). This is usually how/where I use data-* attributes. Of course, there are many ideas/uses for this.