How to use the HTML5 Data attributes for custom data.

HTML5's data attribute is a standard way to store custom data on page elements. 1. It starts with data-, such as data-user-id. The data is invisible to the user but can be accessed through JavaScript; 2. Use the dataset attribute to read or set the data, and the hyphen is converted to camel; 3. Suitable for front-end template rendering, component state management, interactive control and other scenarios; 4. Notes include avoiding storing sensitive or large amounts of data, preventing naming conflicts, paying attention to data type conversion, and reasonable use to avoid performance problems. Correct use of data attributes can make front-end logic clearer and more concise.

HTML5's data attribute is a very practical feature that allows you to store custom data on HTML elements without the need for additional JavaScript objects or global variables. Not only does it have a clear structure, it also makes the front-end logic simpler.

What is a data attribute?

The data attribute is a standard way in HTML5 to embed custom data on page elements. This data is not visible to users, but can be easily accessed and manipulated through JavaScript.

The naming rule starts with data- followed by a property name you defined, such as:

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

The browser automatically recognizes these properties as legitimate HTML properties and does not affect page rendering.

How to read and set data properties?

You can access data through dataset property of JavaScript.

For example:

 const element = document.querySelector('div');
console.log(element.dataset.userId); // Output: "123"
console.log(element.dataset.role); // Output: "admin"

Note: A hyphen (such as data-user-id ) in the attribute name will be converted to camel ( userId ).

The setup is also very simple:

 element.dataset.userId = '456';
element.dataset.newKey = 'newValue';

This will automatically update or add the corresponding data attribute on the DOM.

Which scenarios are suitable for using data attributes?

• Front-end template rendering : When rendering on the server, some initial data can be placed in the data attribute for front-end JS initialization.
• Component status management : For example, information such as the status of the button, whether it has been loaded, can temporarily exist on the DOM.
• Interactive control : For example, after clicking a menu item, you need to pass certain parameters, which can be stored and read directly using data.
• SEO or accessibility assistance : Although sensitive information is not recommended, non-public meta information can be saved in this way.

Of course, avoid storing large volumes of data or sensitive content because they are exposed to source code.

Notes on using data attributes

• Only use data related to the current page context : do not use it to persistent storage, and refresh the page will be gone.

• Be careful when naming conflicts : try to use module or functional prefixes, such as data-cart-item-id instead of data-id .

• Types are strings : If you need a number or a boolean value, remember to convert it manually:

   const id = parseInt(element.dataset.userId, 10);
  const isActive = element.dataset.active === 'true';

• There is little performance problem, but don't abuse it : If you have thousands of elements with a large number of data attributes, it may affect rendering speed or memory footprint.

Basically that's it. The data attribute is simple to use, but it can play a good auxiliary role in actual projects, especially in front-end collaboration and component communication.

The above is the detailed content of How to use the HTML5 Data attributes for custom data.. For more information, please follow other related articles on the PHP Chinese website!