jQuery.data() 用法與使用情境

jQuery.data()

描述：對一個特定的DOM元素附加任何類型的資料（字串，陣列或物件皆可），或對特定元素取得已設定過jQuery.data()的資料

用法：

• jQuery.data( element, key, value )
• jQuery.data( element, key )

範例：設定兩個按鈕，按下第一個按鈕時為它設上jQuery.data()，key為"count" value為"10"，當按下第二個按鈕時，alert第一個按鈕所設定之data("count")。

HTML

<button id="btn1">set data</button>
<button id="btn2">get data</button>

JavaScript

$("#btn1").click(function(){
    $(this).data("count","10");
});

$("#btn2").click(function(){
    alert($("#btn1").data("count"));
});

執行結果（可以點選Edit in JSFiddle實際測試）

使用情境：有些時候我們會需要在某個DOM元素上附加額外的非原生屬性，通常是用來給程式做為判斷或識別的資料，以前的做法就是直接在HTML tag中給定一個屬性與資料如下

<input type="hidden" name="hiddenInput" count="10">

　但是這樣的做法會讓資料曝露在原始碼中，當有某些重要資料（例如：隱私資料、或是在執行某些功能時會需要暫存、又或是要更新到DB的資料）需要隱藏時時，這樣的做法就非常不安全；而若是使用jQuery.data()便不用擔心這些問題，jQuery的cache機制會處理DOM元素與資料的匹配，此外也可以免除在HTML tag中定義一堆屬性。


延伸閱讀：
jQuery API Documentation
jQuery.data cache原理