HTML data-* एट्रिब्यूट्स: कस्टम डेटा एम्बेड करना

HTML data-* एट्रिब्यूट्स

data-* एट्रिब्यूट्स (डेटा एट्रिब्यूट्स) किसी भी HTML एलिमेंट पर कस्टम डेटा संग्रहीत करने की अनुमति देते हैं। ये ग्लोबल एट्रिब्यूट्स हैं और सभी HTML एलिमेंट्स पर मान्य हैं। पेज और JavaScript के बीच निजी डेटा पास करने के लिए डिज़ाइन किए गए हैं।

सिंटैक्स

<element data-attribute-name="attribute_value">

नामकरण नियम

• data- उपसर्ग से शुरू होना चाहिए
• केवल लोअरकेस अक्षर, अंक, हाइफन (-), डॉट (.), कोलन (:), अंडरस्कोर (_)
• data- के बाद कम से कम एक अक्षर
• XML-संगत नाम (कोई स्पेस नहीं, कोई अपरकेस नहीं)

उदाहरण: ट्यूटोरियल प्रकार संग्रहीत करना

<!DOCTYPE html>
<html>
<head>
  <script>
    function display(tutorial) {
      var type = tutorial.getAttribute("data-tutorial-type");
      alert(tutorial.innerHTML + " = " + type + ".");
    }
  </script>
</head>
<body>
  <h1>ट्यूटोरियल्स</h1>
  <h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
  <h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
  <h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>

आउटपुट

किसी भी <h2> पर क्लिक करने पर अलर्ट दिखाएगा: "Java = programming language." आदि।

JavaScript API: dataset प्रॉपर्टी

आधुनिक ब्राउज़र्स dataset प्रॉपर्टी प्रदान करते हैं जो data-* एट्रिब्यूट्स को ऑब्जेक्ट के रूप में एक्सेस करता है:

// HTML: <div data-user-id="123" data-user-name="John">

// प्राप्त करें
element.dataset.userId;      // "123" (कैमलकेस में परिवर्तित)
element.dataset.userName;    // "John"

// सेट करें
element.dataset.newValue = "test";  // data-new-value="test" बनाता है

// हटाएं
delete element.dataset.userId;

// सभी data-* एट्रिब्यूट्स देखें
console.log(element.dataset);  // DOMStringMap ऑब्जेक्ट

नाम परिवर्तन नियम

उपयोग के मामले

• कॉन्फ़िगरेशन डेटा (एनिमेशन अवधि, API एंडपॉइंट्स)
• फॉर्म वैलिडेशन नियम
• एनालिटिक्स ट्रैकिंग डेटा
• CSRF टोकन्स, नॉन्स
• थीम/यूजर प्रेफरेंसेज