Zusammenfassung für längere Artikel

[Matthias Apsel]

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^[1] 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.^[2]

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

---

1. Wenn ich das richtig verstanden habe, wird für jede Domain ein eigener localStorage angelegt, was ja auch sinnvoll ist. Nicht getestet habe ich, ob z.B. example.com und www.example.com verschiedene Domains sind. ↩︎

2. DRY ↩︎