如何通过原生JS编写data属性示例代码？

本文共计1054个文字，预计阅读时间需要5分钟。

前言：在开发中经常会遇到在DOM上存储一些自定义数据的情况，我们可以通过setAttribute方法来实现。但是，当数据为引用类型时，存储后的数据却无效。这里将使用原生的JS对data方法进行实现。

前言

在开发中经常会在DOM上存储一些自定义数据，我们可以通过setAttribute方法来实现。但是当数据为引用类型时，存储后的数据却无效。这里将用原生的JS对data方法进行实现。

使用setAttribute:

<div id="test-data"></div> <p class="test-data-list"></p> <p class="test-data-list"></p> <p class="test-data-list"></p> <p class="test-data-list"></p>

var testData = document.querySeletor('#test-data'); testData.setAttribute('baukh', {a:1,b:2})// 执行后DOM节点变化为<div baukh="[object Object]"></div> testData.getAttribute('baukh'); // => "[object Object]"

可以从上面的代码中看出，存进去的是个Object，取出来的是Object.toString()所产出的字符串。

分析

在JS经典类库-jQuery中存在data方法是通过jQuery.cache的方式进行数据存储，那么还有没有其它方法可以实现？

由于使用场景不同，我想实现的方式是将数据直接存储到DOM节点上，以达到使用时更方便简捷的目的。