Cookie auslesen mit Javascript

Yolo

Grünschnabel
Hallo liebe Community!

Ich hab ehrlichgesagt von Javascript überhaupt keine Ahnung und hab
es mit Müh und Not geschafft eine Cookie zu platzieren. Jetzt möchte ich
den Wert im Cookie aber mit Javascript auslesen!

Kann mir einer von euch bitte eine Function zusammenbasteln!

Vielen Dank im Voraus
Stefan
 
Ich habe da mal kurz was geschrieben:
Code:
Cookie = {
  get: function (name) {
    var data    = document.cookie.split(";");
    var cookies = {};
    for(var i = 0; i < data.length; ++i) {
      var tmp = data[i].split("=");
      cookies[tmp[0]] = tmp[1];
    }
    
    if (name) {
      return (cookies[name] || null);
    } else {
      return cookies;
    }
  },
  
  set: function (name, value) {
    document.cookie = name + "=" + value;
  }
};
Und das kannst du jetzt wie folgt verwenden:
Code:
// Cookie setzen
Cookie.set("session_id", "12345");

// Cookie auslesen:
Cookie.get("session_id");
// ... oder wenn du alle Cookies wissen willst:
Cookie.get();
 
Danke für die schnelle Antwort!

Ganz konkret möchte ich, wenn der Cookie-Wert z.B 1, ist dann soll CSS-Datei 1 eingebunden werden, wenn er 2 ist dann eben CSS-Datei 2. Ist das irgendwie möglich?
 
Du könntest es so versuchen:
Code:
var stylesheet = document.createElement("link");
stylesheet.setAttribute("rel", "stylesheet");
stylesheet.setAttribute("type", "text/css");
stylesheet.setAttribute("href", href); // hier den Verweis zu deiner Datei angeben
document.getElementsByTagName("head")[0].appendChild(stylesheet);
 
Das raff ich leider nicht ganz. Sorry.

Ich erklär alles noch mal von vorne. Ich hab einen Styleswitcher auf meine Seite eingebaut, damit man zwischen einem Sommer- und Winter-Layout wechseln kann. Dann hab ich mittels Cookie abgespeichert ob zurzeit das Sommer- oder das Winter-Layout aktiv ist. Jetz möchte ich das bei jedem Öffnen jeder Unterseite auslesen.
 
Du erzeugst damit ein neues LINK-Element, welches auf die entsprechende Datei verweist, und im HEAD-Element des Dokuments eingefügt wird. Daher kannst du es so nutzen:
Code:
var layout = 1; // oder 2
var href = ["/stylesheet", layout, ".css"].join(""); // Link wäre hier bspw. /stylesheet1.css

var stylesheet = document.createElement("link");
stylesheet.setAttribute("rel", "stylesheet");
stylesheet.setAttribute("type", "text/css");
stylesheet.setAttribute("href", href);
document.getElementsByTagName("head")[0].appendChild(stylesheet);
 
Funktioniert leider nicht, jetzt ist die ganze Formatierung weg.

Ich möchte dir jetzt nicht noch länger auf den Kasten gehen, aber gibt
es denn keine andere Lösung?
 
Schau mal ob du damit klar kommst.

HTML:
<script language="javascript" type="text/javascript">
function cookie_get() {
	if (document.cookie) {
	    document.getElementById("style").href="style2.css";
	} else {
		document.getElementById("style").href="style1.css";
	}
}

function cookie_set() {
	document.cookie = 2;
}

</script>
<body onload="cookie_get()">
<link id="style" rel="stylesheet" type="text/css" href="" />
<p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten.</p>

<p>Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>

<p>Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.</p>

<p>Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das</p>

<div onclick="cookie_get()">Cookie GET</div>
<div onclick="cookie_set()">Cookie SET</div>
</body>

Beim Laden der Seite wird geprüft ob das Cookie vorhanden ist oder nicht und die dementsprechene CSS datei eingebunden. Durch Anklicken von "Cookie SET" wird das Cookie gesetzt und du kannst durch Anklicken von Cookie GET oder durch Drücken von F5 die Seite neu laden und das Cookie erneut auswerten.
 
Das erscheint mir ja alles sehr logisch, aber ich habe zwei verschiedene Cookies, also glaube ich nicht dass das funktionieren wird. Ich setze jeweils ein Cookie mit den Namen Style und dem Inhalt Sommer oder Winter, und ein Cookie mit dem Namen Groesse und dem Inhalt Gross oder Klein. Das sieht dann folgendermaßen aus

HTML:
<head>

<script type="text/javascript">
function setGross () {
  document.body.style.fontSize = "85%";
}
function setKlein () {
  document.body.style.fontSize = "80%";
}
</script>

<script type="text/javascript">
function setCookieSommer(){
    document.cookie = "Style=Sommer";
}
function setCookieWinter(){
    document.cookie = "Style=Winter";
}
function setCookieKlein(){
	document.cookie = "Groesse=Klein"; 
}
function setCookieGross(){
	document.cookie = "Groesse=Gross"; 
}
</script>

</head>

<body>

<a href="javascript:setStyle('sommer')" onclick="setCookieSommer();">Sommer</a>
  <a href="javascript:setStyle('winter')" onclick="setCookieWinter();">Winter</a>
     <a href="javascript:setGross();" onclick="setCookieGross();">Groß</a>
      <a href="javascript:setKlein()" onclick="setCookieklein();"> Klein</a>

</body>

(Das setStyle kommt aus einer externen js-Datei)
 
Zuletzt bearbeitet:
Hallo

ch hab da ne frage zu dem Genialen und schönen Code im Post #2....

Wie bring ich das ganze nun im Chrome zum ****en?

bzw. ich versuche eine if anweisung ob das cookie gesetzt wurde, funktioniert im IE einwandfrei aber nicht im chrome

Code:
if(Cookie.get("aktiv")){}
 

Neue Beiträge

Zurück