JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 406

document.getElementById("b1").onclick = function() {
with (sessionStorage) {
setItem("name", document.getElementById("name").value);
setItem("vorname", document.getElementById("vorname").value);
setItem("strasse", document.getElementById("strasse").value);
setItem("plz", document.getElementById("plz").value);
setItem("ort", document.getElementById("ort").value);
setItem("kommentar", document.getElementById("kommentar").value);
setItem("metadaten", JSON.stringify({
'browser' : navigator.userAgent, 'zeit' : new Date().toString()
}));
}
location.href = "kap14_8.html";
};
}
window.onload = init;
Wie gehabt testen wir erst einmal, ob die Speicherung mit der neuen HTML5-Technik über-
haupt möglich ist, nur hier auf Basis des sessionStorage -Objekts, was aber wie schon
erwähnt sonst vollkommen identisch mit einem persistenten Speichern ist. Danach setzen
wir für jedes Formularfeld ein eigenes Schlüssel-Werte-Paar, das wir jeweils mit setItem()
in dem Sitzungsspeicher ablegen.
Das könnten wir durch die potenziell riesige Datenmenge natürlich auch in einem Schlüs-
sel-Werte-Paar machen, wenn wir in dem Wert eine geeignete Struktur anlegen - wozu
sich JSON anbietet. Wie das geht, demonstrieren wir hier mit den Metadaten. Mittels
JSON.stringify() erzeugen wir aus der JavaScript-Datenstruktur mit zwei Schlüssel-
Werte-Paaren einen JSON-Text, den wir dem Schüssel "metadaten" zuweisen. Das können
Sie natürlich beliebig komplex werden lassen.
Nach der Speicherung der Daten im Sitzungsspeicher leiten wir mit location.href zu
einer neuen Webseite weiter. Wenn nun die neue Seite kap14_8.html im Browser geladen
wird, werden beim Laden der Seite die gespeicherten Sitzungsdaten ausgelesen und einfach
in der Webseite angezeigt. Das machen wir so (kap14_8.js):
Listing 14.28■ Auslesen des Sitzungsspeichers
function init() {
document.getElementById("ausgabe").innerHTML = "";
with (sessionStorage) {
document.getElementById("ausgabe").innerHTML += getItem("name") +
"<br />" + getItem("vorname") + "<br />" + getItem("strasse") +
"<br />" + getItem("plz") + "<br />" + getItem("ort") + "<br />" +
getItem("kommentar") + "<hr />" +
JSON.parse(getItem("metadaten")).browser + "<hr />" +
JSON.parse(getItem("metadaten")).zeit;
}
}
window.onload = init;
Sie sehen, dass wir mit getItem() gezielt die einzelnen Schlüssel auslesen. Insbesondere
die Zeilen sind interessant, wo wir den JSON-Text jeweils mit JSON.parse() in ein JSON-
Objekt umwandeln, um darüber dann wie bei JSON üblich per Punktnotation gezielt die
einzelnen Eigenschat des JSON-Objekts zu verwerten.