When working with a website, you'll sometimes need to store data in order to use it later or do manipulation on it. Beginners with jQuery might store data in the "title", "alt", or "rel" attributes of an link, or use hidden varaibles, like<input type="hidden" name="color" id="color" value="">

and then use jQuery to store a value to that hidden variable:


But jQuery gives us a more advanced method called "data()," and it lets us store a whole slew of data on any element in your page. For my projects, I'll pick one element to store all my data to--my preference is a big element, like an outer div or something, but you can make it any DOM element you want. You can even create an element just for the purpose of storing data:

<div id="data"></div>

Now, to add data to your element, you can use the following method:


As you can see, you can store more than one value to your data holder. To retrieve it, you can use the data() method again,

<script type="text/javascript">alert('The color is: ' + $('#data').data('color'));alert('The size is: ' + $('#data').data('size'));alert('The weight is: ' + $('#data').data('weight'));</script>

jQuery data() is an under-used fuction, I hope you find it useful and see that it brings a certain level of elegance to developing your applications.