HTML5里面的dataset属性真的很好用！就跟”data-*”这样的特殊属性一样，可以保存和读取各种简单数据。而且，这个属性没有数量限制，还能通过JavaScript动态改变，甚至能用CSS来美化！这样一来，处理数据就变得井井有条，也更加直观！
无论是啥子标贴儿，都可以用自定义属性带入和输出值。如果你想要在一首歌曲中添加更多资料，那么 Dataset 属性就能帮到你了！不只是存储数据~它还能让你更轻松地读取这些数据。
使用Dataset的注意事项
说起来，Dataset这货可牛了！不过用它时得注意点。名字，就按着常见的’data-*’格式呗，随你起名，大小写，特殊字符啥的咱就别弄了，免得出错。再者，尽管啥都能塞进去，但还是建议放些简单的字符串，别整太复杂的数据结构，省心又省力。
还有，那个Dataset属性里的数据你一打开网页就能看到！记住如果不马上用它，记得手动手刷新一下页面，这样用户才看得到最新的数据~这点可得注意，否则可能会出现数据不同步的问题。
Dataset的存取方法
要想在 Dataset 属性里存取数据，有两种基本的方式：一是通过我们熟悉的 DOM 节点，像调整其他属性那样来操作它；二是直接使用 Dataset API，这个方法简单明了，还挺实用的。
比如说要查歌的专辑知道？用这个方法就能搞定：
javascript 那就这么干吧：首先，咱们要找到这个音乐锁扣的数据专辑属性——也就是那个叫 'music-Latch' 的东西，它上面还有个 'data-Album' 标签。 console.log(album);
Document 昨日重现 var mdoc=document.getElementById('music'); alert(mdoc.getAttribute('mtitle'));
这个方法倒是挺方便的，但是如果要收集好多带`data-*`属性的数据，就得慢慢来了，有点麻烦。
用DatasetAPI真的超方便！直接就能获取到各数据项的“提纯能力”，而且还能让你轻松处理这些数据，就像拿东西或者看图片那样容易。比如刚才那个例子，你就可以这样写：
联网后不小心找到个音乐东西（id=”music-latch”]）。
你可以试着打印一下这个音乐的专辑信息。
放心，现在咱们访问data不用再找“data-”了，直接用`.dataset.name`就行。超级容易对不对？而且，你用Dataset API改什么，立马就能在data属性上看到效果，省事儿多了，真不错！
Dataset的实战案例
明白不？现在让我跟你说说怎么运用这Dataset属性来修复这个歌曲播放器的问题。设想一下，每个歌曲都带有你需要的所有信息——歌名、歌手名字和专辑名字等等。利用这Dataset属性，你就能轻而易举地将这些信息塞到播放器里面，想找出来也就是几秒钟的事儿！
Latch (feat. Sam Smith)
先把 HTML 的音乐播放器弄好别忘了用 Dataset 记住点儿重要信息哈。
“`html
下面咱就试试用熟悉的JavaScript去操控这个数据集API！
看看这里，标题是啥？是不是叫”音乐”？
你知道这个歌手叫什么吗?: 直接告诉我 “艺术家名: “+音乐数据集中的艺术家名称就好。
控制台上就蹦出个问号：“专辑叫啥？”+ 从音乐标签里查的albums字段
这么弄下来，音乐素材里面的数据就到手了要是想改点啥？没事儿，用 Dataset API，简简单单搞定就行。
Dataset的应用场景
dataset属性真方便！不管你要在电商网站上记录商品的ID和价格，或者在社交网站上登录用户的ID和昵称图标，又或是在游戏网站上设置角色的属性、装备、技能等，都能用它轻松搞定！
别忘了用DataSet给数据化妆！这个技巧不仅让数据好读好写、更有条理，还能美化它，提升用户体验。你知道吗？我们还可以用CSS给这些数据打扮得漂漂亮亮的，真是太棒！
Dataset的优缺点
说Dataset这个属性，得说真是有点意思，但是也有缺点。来聊聊它的优点，那就是超级好用！用这种方法，我们可以轻松地将数据塞进HTML元素甚至JavaScript中，而且还能用CSS来美化它们，看起来超舒服的！
说到 Dataset 属性，其实有点小问题。首先，它只支持字符串类型的存储，对于其他类型的数据就无能为力了；还有就是，这个数据一加载好，就不能再动了，想调整还得用 JavaScript 来刷页面，万一手抖，可能会导致数据混乱。
var mdoc=document.getElementById('music-latch');
var ds=mdoc.dataset;
alert(ds.date+'--'+ds.album);
Dataset的未来发展
Web技术一直在进步特别是Dataset这个小家伙，功能越来越强大了。以后你会发现它可以轻松应付各种数据，不论是数字、布尔值还是小物体那种都不在话下。总之，就是为了让你更愉快地玩转数据。而且，它还能帮你完成很多数据处理任务，比如排序、筛选、搜索之类的，让你的工作效率飙升。
总之，dataset这个属性就像HTML5里的神兵利器，用着特别舒心，想要调用数据，搞个JavaScript就能搞定。以后web技术越做越好，我估计dataset属性也会跟着升级，支持更多格式的数据类型，这样咱们处理数据就更得心应手，也更直观明了了。
总结
看完这篇文章，你应该对HTML5的 Dataset 属性有所了解？这个属性真是方便极了，简单易上手！用它可以轻而易举地把各种各样的数据镶嵌进 HTML 元素，然后再利用 JavaScript 随意调整。不过使用时需要注意几个问题，比如如何给它起个合适的名字、哪种类型最适合、以及如何保证与其他代码的同步等等。只要稍微研究一下这些小细节，掌握 Dataset 属性就能让你的开发效率飙升！
你们平时编代码会不会用到dataset啊? 真的有用到的话，来谈谈呗！写下你的使用心得，分享给大家，让更多人发现dataset的神奇之处！点赞转发都不能少让我们一起传播知识！
评论0