Java Reference
In-Depth Information
Bild 14.8■
Mehrere Schlüssel-Werte-Paare wurden gespeichert und wieder ausgelesen.
Mit dem Klick auf die erste Schaltläche speichern wir eine Zufallszahl. Deren Schlüssel
ergibt sich aus dem Token
"key"
und dem Wert einer globalen Variablen
counter
, die wir
am Beginn des Skripts anlegen und nach jedem Speichern eines Werts mittels
setItem()
um den Wert 1 erhöhen. Mit jedem Klick eines Anwenders wird also ein neuer Wert im
lokalen Speicher persistent angelegt. Mit dem Klick auf die dritte Schaltläche löschen wir
den lokalen Speicher mittels
clear()
und wir setzen den Zähler zurück, damit über die
erste Schaltläche neu angelegte Schlüssel-Werte-Paare wieder mit dem Schlüssel
"key0"
beginnen werden.
Die Funktionalität zum Auslesen des Inhalts des lokalen Speichers ist etwas umfangreicher.
Wir wollen hier nicht gezielt einen Wert auslesen (was man natürlich auch leicht machen
kann - beachten Sie das folgende Beispiel), sondern alle gespeicherten Werte inklusive der
Namen des jeweiligen Schlüssels auslesen und einfach ausgeben. Dazu arbeiten wir mit
einer
for...in
-Schleife, bei der
i
den Schlüssel repräsentiert. Synchron zum jeweiligen
Schleifendurchlauf zählen wir die lokale Variable
j
hoch, die wir als Index in der Methode
key()
verwenden, um darüber den Namen des Schlüssels abzufragen. Mit
getItem(i)
er -
mitteln wir den jeweils gespeicherten Wert.
14.3.3■Ein Beispiel zum Speichern von komplexen Informationen
Betrachten wir ein weiteres Beispiel, das dieses Mal komplexere Informationen ablegt und
dazu auch das
sessionStorage
-Objekt verwendet. Wir wollen Benutzereingaben aus einem
Webformular in einem Sitzungsspeicher ablegen und dabei gleich einige für den Anwender
vollkommen unsichtbar erhobenen Metainformationen über den Browser und den Zeit-
punkt der Speicherung mit speichern
(kap14_7.html)
:
Listing 14.26■
Das Webformular, dessen Daten für die Sitzung lokal gespeichert werden sollen
...
<script type="text/javascript" src="lib/js/kap14_7.js"></script>
</head>
<body>
<h1>Session Data Storage mit HTML5</h1>
<form>
<div id="label">Name</div><input id="name"/><br />
<div id="label">Vorname</div><input id="vorname"/><br />
<div id="label">Strasse</div><input id="strasse"/><br />
<div id="label">PLZ</div><input id="plz"/><br />
<div id="label">Ort</div><input id="ort"/><br />
<div id="label2">Kommentar</div>
Search WWH ::
Custom Search