；2.通過dataset訪問，如button.dataset.userName獲取值；3.適用於輕量級場景如存儲ID、狀態(tài)或配置，但不適合大量數(shù)據(jù)、敏感信息或複雜狀態(tài)管理；4.數(shù)據(jù)應(yīng)保持簡單，並註意更新DOM不會自動同步dataset。

Using data-* attributes is a straightforward and effective way to store custom data directly in your HTML elements. They're especially handy when you need to pass small bits of information from the HTML to JavaScript without making extra server calls or complicating your code.

Here's how to use them effectively:

---

What Are data-* Attributes?

data-* attributes let you store extra information on standard HTML elements without using non-standard attributes or overloading class names or IDs. The * part means you can name it anything you want, as long as it starts with data- .

For example:

 <div data-user-id="12345" data-role="admin"></div>

These are valid and won't break HTML validation. Browsers ignore them unless accessed via JavaScript.

---

How to Access data-* Values in JavaScript

Once you've added the attributes, you can retrieve their values using JavaScript in a couple of ways.

Using dataset (Recommended)

Each element has a dataset property that contains all the data-* attributes as properties. Just drop the data- prefix and convert the attribute name to camelCase.

Example:

 <button id="profile" data-user-name="Sarah" data-is-active="true">View Profile</button>

JavaScript:

 const button = document.getElementById('profile');
console.log(button.dataset.userName); // "Sarah"
console.log(button.dataset.isActive); // "true"

Note: Even if the value looks like a boolean or number, it's always a string. You'll have to convert it manually if needed.

Using getAttribute

You can also use getAttribute , which gives you more flexibility if the name doesn't follow standard naming rules.

 console.log(button.getAttribute('data-user-name')); // "Sarah"

---

When and Why to Use Them

They're great for lightweight storage scenarios, such as:

• Passing initial configuration to a component
• Storing temporary UI states (like active tab index)
• Holding identifiers (eg, user ID, product ID) for dynamic actions

Avoid using them for:

• Large chunks of data — JSON inside data-* gets messy fast
• Sensitive or private info — they're visible in the DOM
• Replacing proper state management in complex apps

---

A Few Tips to Keep in Mind

• Keep the data simple: strings, numbers, booleans
• Don't store raw HTML or JS code inside them
• If you update the dataset via JS, the DOM won't reflect the change automatically (unless you explicitly set the attribute)

If you're working with multiple pieces of related data, consider grouping them logically. For instance:

 <div data-product=&#39;{ "id": 456, "name": "T-shirt", "price": 19.99 }&#39;></div>

Just remember to parse it properly:

 const productData = JSON.parse(div.dataset.product);

---

That's basically how data-* attributes work. They're not flashy, but they do the job well when used right.