Element Data Handler

Der Element Data Handler ermöglicht das Speichern und Verwalten von elementbezogenen Daten, ohne zusätzliche Attribute im DOM oder externe Datenstrukturen verwenden zu müssen. Im Gegensatz zu data-*-Attributen werden die Werte nicht im HTML-Markup gespeichert und sind dadurch weder sichtbar noch über die DOM-Struktur auslesbar. Die Daten existieren ausschließlich während der Laufzeit der Anwendung und sind direkt an das jeweilige Element gebunden.

Die gespeicherten Werte sind flüchtig und werden weder persistiert noch in Datenbanken oder Browser-Speichern abgelegt. Nach dem Entfernen eines Elements oder dem Neuladen der Anwendung stehen die zugehörigen Daten nicht mehr zur Verfügung. Da die Zuordnung direkt am Element erfolgt, entfällt die Verwaltung separater Maps, Arrays oder globaler Objekte. Gleichzeitig bleibt die Datenhaltung sauber gekapselt und eng mit dem jeweiligen DOM-Element verknüpft. Der Handler eignet sich insbesondere für temporäre Zustände, interne Referenzen, Initialisierungsinformationen oder andere Metadaten, die für die Verarbeitung eines Elements benötigt werden, jedoch nicht Bestandteil des sichtbaren Markups sein sollen.

Initialisierung

document.addEventListener('kryzo:ready', ({ detail: { DATA } }) => {
    /* Ab hier stellen alle DATA Funktionen zur Verfügung */
});

Daten setzen

/*  
    Dem Element unsichtbare Werte zuweisen
    element:    Zu verwendendes Element
    key:        Zu setzender Key
    value:      Zu setzender Wert
*/
DATA.set(element, key, value);

Daten auslesen

/*  
    Vom Element unsichtbare Werte auslesen
    element:    Zu verwendendes Element
    key:        Zu verwendender Key
*/
const myWert = DATA.get(element, key);

Daten prüfen

/*  
    Im Element unsichtbare Werte prüfen
    element:    Zu verwendendes Element
    key:        Zu verwendender Key
*/
if(DATA.has(element, key)){
    console.log("Wert gefunden");
}

Daten löschen

/*  
    Im Element unsichtbare Werte entfernen
    element:    Zu verwendendes Element
    key:        Zu verwendender Key
*/
DATA.remove(element, key);