Variablenwerte übertragen und empfangen
Variablen speichern und auf anderer Seite nutzen
siehe auch Wiki Werteübergabe
Wenn man Werte über mehrere Seiten hinweg nutzen möchte, gibt es mehrere Möglichkeiten: cookies, window.name, URL Querystring, Webstorage
URL Querystring / window.location.search
siehe auch Wiki window.location.search
Man kann an eine URL Name Werte Paare anhängen und diese mit location.search auslesen.
Diese angehängten Name/ Werte Paare nennt man Query String. Nach der URL folgt ein ? und dann werden die Name=Werte Paare angehängt, getrennt mit einem kaufmännischem & Formulardaten die mit der Methode GET versand werden nutzen diese Methode.
empfang.html?vorname=Michael&nachname=Schmidt
Mit dem Befehl location.search wird der angehängte Querystring inklusive ? zurückgegeben.
var daten = window.location.search;
?vorname=Michael&nachname=Schmidt
Encode
encodeURI / encodeURIComponent
siehe auch Wiki encodeURI siehe auch Wiki encodeURIComponent
Die Zeichen müssen vorher enkodiert werden, damit Zeichen, die in einer URL nicht erlaubt sind, umgewandelt werden. Dazu kann man die Methode encodeURI nutzen oder encodeURIComponent. Die letztere Methode wandelt alles um.
Decode
siehe auch ECMA
Nach dem Empfang müssen die Daten dann wieder decodiert werden. Das macht man mit decodeURI oder decodeURIComponent
Beispiel Formular
Beispiel einfaches Formular
Im folgendem Beispiel werden die Daten eines Eingabefeldes per Formular übersand. Mit dem HTML-Attribut enctype="application/x-www-form-urlencoded" Werden die Daten encodiert. Auf der Empfangseite werden die Daten auf 3 verschiedene Arten angezeigt.
- nicht decodiert
- decodeURI
- decodeURIComponent
decodeURIComponent dekodiert auch die folgenden Zeichen:
, / ? : @ & = + $
Beispiel Bildauswahl und Anzeige
Beispiel Bilder auswählen
Auf der Seite bilder-senden.html hat man die Möglichkeit einige Bilder auszuwählen, welche dann auf der Seite empfang.html angezeigt werden.Es ist eine Grundfunktion, die vielen Spielen zugrunde liegen kann. Die Bilder sind namentlich durchnummeriert, das erspart die Arbeit ein Array anzulegen, in dem die Bildnamen gespeichert sind. t1.jpg, t2.jpg ... etc.
Erklärung
Alle Bilder der Seite werden in dem Array bilder hinterlegt. In der for-Schleife wird allen Bildern die Variable
Allen Bildern wird ein Eventlistener zugewiesen, in dem die Funktion bildAuswahl aufgerufen wird. In dieser Funktion wird die Bildnummer nr dem Array auswahl hinzugefügt. Außerdem werden die Bilder halbtransparent gemacht mit der CSS Eigenschaft opacity. Man könnte sie auch völlig unsichtbar machen, so dass man sie auch kein zweites mal anklicken kann.
Senden
In der Funktion senden(), welche durch den sendBtn aufgerufen wird, wird die Seite empfang.html aufgerufen. An diese URL wird die Variable bilder angehängt. Wenn man mit der Methode GET Variablen an eine URL anhängen will, geschieht dieses nach folgendem Schema:
seite.html?variable1=wert&variable2=wert
Die Werte dieser Variablen sind immer Strings. Deswegen werden die Werte des Arrays auswahl mittels join() in einen String umgewandelt und hinter dem Gleichheitszeichen notiert.
Die Variable bilder enthält also alle Bildnummern mit Komma getrennt. z.B.:
empfang.html?bilder=1,7,9
Script bilder-senden.html
var auswahl = [];
var bilder = document.getElementsByTagName("img");
for(var i=0; i < bilder.length; i++){
bilder[i].nr = i;
bilder[i].addEventListener("click", bildAuswahl);
}
function bildAuswahl(evt){
console.log(evt.currentTarget.nr);
auswahl.push(evt.currentTarget.nr);
evt.currentTarget.style.opacity = "0.5";
}
//------abschicken--------------
var sendBtn = document.getElementById("sendBtn");
sendBtn.addEventListener("click", senden);
function senden(evt){
var bildNummern = auswahl.join();
window.location.href = "empfang.html?bilder="+bildNummern;
}
Erklärung
Auf der Seite empfang.html werden die angehängten Daten ausgelesen und verarbeitet.
window.location.search liefert alles ab dem Fragezeichen hinter der URL. Das wird in der Variablen querystring hinterlegt. Nachdem überprüft wurde, ob querystring überhaupt etwas enthält, oder anders ausgedrückt, ob überhaupt Daten an die URL angehängt wurden. Uns interessieren aber nur die Nummern der angeklickten Bilder. Deswegen werden die ersten Zeichen von querystring bis zu den Nummern abgeschnitten. querystring.slice(8); siehe String und in der Variablen werte abgelegt.
Mittels split() werden diese Zahlen als Array umgewandelt und unter dem Namen bildNr hinterlegt.
Nun muss man nur noch das Array bildNr mit einer for-Schleife durchlaufen und neue Bilder erzeugen und auf die Bühne legen
var querystring = window.location.search;
if (querystring == ''){
document.getElementById("anzeige").innerHTML = "Es wurden keine Daten übermittelt."
} else{
//?bilder= sind die ersten 8 Zeichen, alles was danach kommt sind die Zahlen
var werte = querystring.slice(8);
console.log("werte: " + werte);
//die Zahlen werden in das Array bildNr gelegt
var bildNr = werte.split(",");
//Anhand des Arrays werden die Bilder auf die Bühne gelegt
for(var i=0; i < bildNr.length; i++){
var bild = document.createElement('img');
bild.src = "img/t"+bildNr[i]+".jpg";
document.getElementById("container").appendChild(bild);
}
}
Webstorage HTML 5
Siehe hierzu auch meine HTML Tipps Thema Webstorage
Seit HTML 5 gibt es localStorage und sessionStorage. Damit hat man die Möglichkeit auf dem User Rechner etwas abzuspeichern. localStorage wird dauerhaft abgespeichert, sessionStorage hat nur Gültigkeit während einer Session.
Beispiel sessionStorage
Erklärung zum Beispiel unten.
Mittels sessionStorage.count wird abgefragt, ob es eine Sessionvariable namens "count" gibt. Würde man ohne diese Abfrage eine Sessionvariable dieses Namens erzeugen und dort einen Wert hinterlegen, würde eine eventuell vorhandene Variable dieses Namens ohne Vorwarnung überschrieben.
Ist die Variable count vorhanden, wird deren Wert, der immer als String hinterlegt ist, mittels parseInt in einen Integer umgewandelt und in der Variablen visitis hinterlegt. Visits wird um 1 erhöht visits++;
Dieser Wert wird der sessionVariablen "count" zugwiesen.
Wenn die sessionVariable "count" nicht vorhanden ist, wird ihr der Startwert 1 zugwiesen.
Auf storage2.html wird die sessionStorage Variable angezeigt. Ruft man die beiden Seiten mehrmals hintereinander auf, sieht man wie sich die Variable erhöht. Das gleiche Beispiel könnte man auch mit localStorge erstellen.
Seite 1 Script
if(sessionStorage.count){
var visits = parseInt(sessionStorage.getItem("count"));
visits ++;
sessionStorage.setItem("count", visits);
}else{
sessionStorage.setItem("count", "1");
}
Seite 2 Script
var aufrufe = sessionStorage.getItem("count");
document.getElementById("result").innerHTML = aufrufe;
