我們先看下$.fn.data()的使用，這個和$.data()是不一樣的，前者是和某個jquery對象相關，後者則是全局方法。主要有data()和removeData()這2個實例方法。通過下面的例子和執行結果可以看到：$.fn.data()和$.fn.removeData()跟$.data的使用方式沒有什麽差別。

// 支持任何數據類型
  2. $( "body" ).data( "name", "xx" );
  3. $( "body" ).data( "sex", "male" );
  4. $( "body" ).data( "foo", 100 );
  5. $( "body" ).data( "object", {myType: "test", count: 40 } );
  6. $( "body" ).data("array", [ 1, 2, 3 ]);
  7. // data()獲取單個屬性console.log($( "body" ).data( "foo" ));
  8. // 獲取所有屬性console.log($( "body" ).data());
  9. // 刪除屬性$( "body" ).removeData("foo");console.log($( "body" ).data());
  10. // 批量修改屬性$( "body" ).data({"new" : 123, "name":"yy", "sex" : "female"});console.log($( "body" ).data());  
 

接著我們看下：jquery數據緩存方案與HTML5中data-的關系。如果html元素有自定義屬性data-，那麽調用$.fn.data()的時候會獲取這些屬性的值。

  1. <div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
  2. <script>  console.log($("#one").data("role" ) === "page");   
  3.  console.log($("#one").data("lastValue" ) === 43);   
  4. console.log($("#one").data("hidden" ) === true);    
  5. console.log($("#one").data("options" ).name === "John");
  6. </script>  
 

1. 可以看到：jQuery獲取data-*屬性的時候，會自動進行數據類型轉換，支持數字、對象和數組等類型。如果我們不想做這種自動類型轉換，那麽可以使用attr()函數獲取原始值。

<div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
<script>  var domOne = $("#one")[0];    console.log($.data(domOne));      
         console.log($("#one").data("role" ) === "page");  console.log($.data(domOne));      
  console.log($("#one").data("lastValue" ) === 43);   console.log($.data(domOne));        console.log($("#one").data("hidden" ) === true);    console.log($.data(domOne));        console.log($("#one").data("options" ).name === "John");    console.log($.data(domOne));
</script>
 

通過代碼1的執行結果，可以得出2點結論：

1.HTML5中的data-*屬性，會被jQuery附加到HTMLElement對象上，這就是為什麽我們可以通過$.data()獲取HTML5自定義屬性值的原因。

2.jQuery獲取data-*是懶惰的、按需的。如果代碼中沒有使用這些HTML5自定義屬性，那麽jQuery是不會附加這些屬性到HTMLElement對象上的。

代碼2：
view plaincopy to clipboardprint?

 1. <div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
  2. <script>  var domOne = $("#one")[0];     
  3.  console.log($("#one").data("role" ) === "page");  
  4.   console.log($.data(domOne));  
  5.   console.log($.data($("#one")[0]));  
  6. console.log($.data($("#one")));</script>  

更加可以證實：data-*是被綁定到HTMLElement對象上的，而不是jQuery封裝後的對象上。

代碼3：
view plaincopy to clipboardprint?

 1. <div id="b" data-name="b" data-hobby="swim"></div>
  2. <script>    
  3. // 試圖使用jQuery修改name屬性   
  4. $("#b").data("name","newb");        
  5. // 使用DOM修改  
  6. $("#b")[0].dataset.hobby = "run";       
  7. console.log(document.getElementById("b").dataset.name);
  8.  console.log(document.getElementById("b").dataset.hobby);</script>  

可以看到：使用jQuery修改屬性只是在內存中的操作，並不會刷新dom。但是通過js中的dataset修改時候，會刷新DOM，這是兩者最大的不同。

代碼4：
view plaincopy to clipboardprint?

  1. <div id="a" data-name="a" data-hobby="books"></div>
  2. <script>   
  3. var domA = document.getElementById("a");       
  4.  console.log(domA.dataset.name);//a  
  5. console.log($("#a").data("name"));//a       
  6. // 修改name  
  7.  domA.dataset.name = "aty";     
  8.  console.log(domA.dataset.name);//aty   
  9.  console.log($("#a").data("name"));//結果是a,不是我們期望的aty 
  10. // 修改hobby 
  11.  domA.dataset.hobby = "run";    
  12.  console.log(domA.dataset.hobby);//run  
  13.  console.log($("#a").data("hobby"));//run
  14. </script>  

這裏需要特別註意：jQuery只會在第一次訪問data-的時候，將屬性值加載到內存中；之後就和data-無關了。The data-attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)。也就是說：data-*屬性只是起初始化的作用。

至此：jQuery數據緩存和HTML5 data-屬性介紹完畢，簡單總結下比較關鍵的幾點：
1.jQuery讀取data-會自動做數據類型轉換，如果不想要這種轉換只能使用attr()去獲取原始的屬性值。
2.jQuery讀取data-屬性是懶惰的、按需的，只有真正使用這些屬性的時候，jQuery才會將其加載到內存。
3.jQuery修改屬性值，都是在內存中進行的，並不會修改 DOM。
4.data-會被jQuery綁定到HTMLElement對象上，而不是jQuery封裝後的對象上。
5.最重要的一點：jQuery只會在data-*第一次被訪問的時候將其加載到內存，之後再也不會重新讀取了。

HTML5數據存儲方案data與jQuery數據存儲方案$.data()的區別