Cách lưu trữ dữ liệu tùy chỉnh riêng tư cho trang/ứng dụng trong HTML?

Sử dụng thuộc tính data-* trong HTML để lưu trữ dữ liệu tùy chỉnh riêng tư cho trang. Nó bao gồm tiền tố "data-" theo sau bởi tên thuộc tính (không chứa chữ hoa).

Bạn có thể chạy mã sau để triển khai thuộc tính data-*:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <script>
      function display(rank) {
        var myRank = rank.getAttribute("data-rank-type");
        alert("Hạng " + rank.innerHTML + " có " + myRank + " điểm.");
      }
    </script>
  </head>
  <body>
    <h1>Hạng và Điểm</h1>
    <p>Nhấp vào hạng bất kỳ để xem chi tiết:</p>
    <ul>
      <li onclick="display(this)" id="fifth" data-rank-type="500">Hạng Năm</li>
      <li onclick="display(this)" id="sixth" data-rank-type="600">Hạng Sáu</li>
    </ul>
  </body>
</html>