[TimLinux] JavaScript 如何在html标签的data-*属性使用JSON数据

1. HTML data-*属性

H5引入的data-*属性，可以在JavaScript通过.dataset.*的方式来获取属性的值，例如：

/* HTML标签：
 *    <input id="idTest" data-mydata="this is my data">
 */

var idTest = document.getElementById('idTest');
console.log(idTest.dataset.mydata);

// 输出：this is my data.

2. data-*属性使用JSON值

/*
 * 只要data-*属性的值，是符合JSON.stringify转换后的数据格式
 * 就可以逆向，使用JSON.parse(data-*)的方式获取JSON数据
 * 尤其需要注意的是，字符串后的JSON数据，字段的值key、value
 * 都必须是通过双引号引用的。
 * <input id="idTest" data-mydata="{'id': '123', 'result'; 'true'}">
 */

var idTest = document.getElementById('idTest');
var json_mydata = JSON.parse(idTest.dataset.mydata.replace(/'/g, '"'));

// 得到的json_mydata就是一个JSON格式的数据了。