Hallo alle,
ich habe @marctrix’ Idee aufgegriffen und durch lokale Speicherung erweitert.
Dazu habe ich als erstes den details-Elementen noch 2 Attribute verpasst, denn sicher wird es mehrere Artikel in der Domain geben und dass es verschiedene Zusammenfassungen geben kann, hat Marc bereits in seinem Beispiel gezeigt.
<article aria-describedby="article-description" id="12345">
<details id="article-description" open data-for="12345" data-type="description">
<details data-for="12345" data-type="easy-speech">
Das details-Element sollte ein for-Attribut haben dürfen. Was meinen die Experten?
Mein Skript sieht so aus:
function safe_changes(el) {
var item = "details-" + el.getAttribute("data-for") + "-" + el.getAttribute("data-type");
localStorage.setItem(item, el.hasAttribute("open") ? "false" : "true");
}
var details = document.querySelectorAll("details[data-for][data-type]");
for (var i = 0; i < details.length; i++) {
var item = "details-" + details[i].getAttribute("data-for") + "-" + details[i].getAttribute("data-type");
if (localStorage.getItem(item) == null) {
localStorage.setItem(item, details[i].hasAttribute("open") ? "true" : "false");
}
else {
localStorage.getItem(item) == "true" ? details[i].setAttribute("open","true") : details[i].removeAttribute("open");
}
details[i].addEventListener("click", function(){safe_changes(this)});
}
Was lässt sich hier verbessern? Zum Beispiel würde ich gern vermeiden, mich in Bezug auf item zu wiederholen.
Sind Prüfungen der Browserunstützung für querySelectorAll und localStorage notwendig? Imo nein, praktisch alle Browser verstehen das. Der IE, der das details-Element nicht kennt, verhält sich ebenfalls unauffällig.
Bis demnächst
Matthias
Matthias Apsel
dedlfix
marctrix
Tabellenkalk
JürgenB