Frage zum Wiki-Artikel „cookies“

[Ed Straker]

Sehr geehrte Forums-Teilnehmer!

Ich gestalte eine Homepage, auf der der Benutzer zwischen vier Farbdesigns wählen kann. Die entsprechenden Farbangaben befinden sich in ausgelagerten CSS-Dateien (lila.css, gruen.css, rosa.css und schwarz.css), wobei lila.css das Standarddesign ist. Alle anderen Formatierungsangaben befinden sich inline auf den jeweiligen Seiten.

Insgesamt gibt es nur drei Seiten. Die Designauswahl erscheint nur auf der Startseite. Der Wechsel zwischen den Designs funktioniert in allen getesteten Browsern (Firefox, Edge und Chrome auf verschiedenen Android-Geräten) anstandslos.

Das Script switcher.js sieht so aus:

function setActiveStyleSheet(title) {
  var i, a, main;
  for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
    if (
      a.getAttribute("rel").indexOf("style") != -1 &&
      a.getAttribute("title")
    ) {
      a.disabled = true;
      if (a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
    if (
      a.getAttribute("rel").indexOf("style") != -1 &&
      a.getAttribute("title") &&
      !a.disabled
    )
      return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
    if (
      a.getAttribute("rel").indexOf("style") != -1 &&
      a.getAttribute("rel").indexOf("alt") == -1 &&
      a.getAttribute("title")
    )
      return a.getAttribute("title");
  }
  return null;
}

Nun kommen die Problemzonen. Um das auf der Startseite gewählte Design auch auf die beiden anderen Unterseiten zu übertragen, muss ein Cookie gespeichert werden, auf das die Seiten beim Aufruf zugreifen können. Dieses Script cookie.js sieht so aus:

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return;
    c.substring(nameEQ.length, c.length);
  }
  return null;
}

Beim Laden einer der beiden anderen Seiten muss diese das gespeicherte Cookie mit den gewählten Designinformationen abholen und anwenden. Dieses Script onload.js sieht so aus:

window.onload = function (e) {
  var cookie = getCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
};

window.onunload = function (e) {
  var title = getActiveStyleSheet();
  setCookie("style", title, 365);
};

Ich habe die letzten Tage damit verbracht, unzählige Varianten auszuprobieren und mich natürlich auch hier im Forum umgesehen. Ich kann machen was ich will - es funktioniert nicht. Wenn ich von der Startseite mit dem gewählten Farbdesign auf eine der beiden anderen Seiten wechsle, springt das Design wieder auf die Standardwerte zurück. Wo der Hund begraben liegt, habe ich noch nicht herausgefunden und hoffe auf Eure Expertise.

Liegt es am cookie.js und/oder am onload.js oder an den Headern?

Dazu ist zu sagen, dass im Header jeder HTML-Datei die einzelnen CSS- und JS-Dateien verlinkt sind. Das sieht so aus:

<link href="css/lila.css" rel="stylesheet" type="text/css" title="lila">
<link href="css/gruen.css" rel="alternate stylesheet" type="text/css" title="gruen">
<link href="css/rosa.css" rel="alternate stylesheet" type="text/css" title="rosa">
<link href="css/schwarz.css" rel="alternate stylesheet" type="text/css" title="schwarz">
<script src="js/switcher.js" type="text/javascript"></script>
<script src="js/cookie.js" type="text/javascript"></script>
<script src="js/onload.js" type="text/javascript"></script>

Ich habe auch schon versucht, den Link zur switcher.js aus dem Header der beiden Unterseiten zu entfernen, da er nur auf der Startseite benötigt wird. Hat aber auch nicht geholfen. Jetzt bin ich mit meinen rudimentären JavaScript-Kenntnissen am Ende und bitte um Hilfe.

Man möge mir verzeihen, wenn ich als Newbe hier, meinen Hilferuf an falscher Stelle gepostet haben sollte.

Liebe Grüße, Ed

[EDIT]SyntaxHighlighting ergänzt - Felix Riesterer[/EDIT]