data-*属性——使用自定义属性的方式存储数据

HTML5提供了data-*属性能存储页面或应用程序的私有自定义数据。只需在属性前加上data-前缀即可，值可以是任意字符串。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
• 属性值可以是任意字符串

注意：用户代理会完全忽略前缀为 "data-" 的自定义属性。

data-属性的一大好处是所有浏览器都支持，可以使用getAttribute方法来获取data-属性的值，用setAttribute方法来设置值。

在JavaScript中通过元素的dataset属性访问data-属性的值，dataset是一个DOMStringMap对象，使用它比使用getAttribute更方便，不用加上data-前缀。

eg:   tree.dataset.leaves='46';

如果要删掉一个值，将其置为null，或者使用delete

tree.dataset.leaves=null;

delete tree.dataset.leaves;

jQuery的data方法也可以访问元素的data-属性：

var $tree=$('#tree');

$tree.data('plant-height');

jQuery的data方法会自动转换数据类型：

console.log(typeof $tree.data('leaves'))       //number

可以自动反序列化JSON数据，这样可以在后端生成模板时将序列化成JSON直接存入HTML中。

data属性的适用情况：

存储组件日后可能被JavaScript使用到的参数（元素的高度和透明度）

存储于模块关联的数据

存储分析数据（配合GA或者其他数据分析追踪工具）

存储游戏中的值（生命值，魔法值，攻击力等）

不适用的情况：

已经有更适合的属性，说明信息最好存在title属性里，而不是类似data-description的属性

自定义data属性和微格式数据不能混用，两者并无直接关系。微格式通常提供给第三方的程序（如搜索引擎）而自定义data属性是为你自己的程序使用。

不要利用data属性作为应用CSS样式的标准