HTML5 in der mobilen Webentwicklung - HTML5-Apps fur iPhone und Android - page 180

Viel wichtiger ist zunächst das Attribut storageArea , das immer gesetzt sein muss und
auf den aktuell veränderten Storage zeigt: localStorage oder webStorage . Das Attri-
but key repräsentiert den aktuellen Key, der verändert worden ist.
Sofern ein Wert unter diesem Key vorhanden war, enthält oldValue eine Kopie dieses
Werts, newValue repräsentiert den neuen Wert, während url die URL des aktuellen
Dokuments enthalten sollte. In unseren Tests war url jedoch sowohl auf iPhone OS 4
als auch auf Android 2.1 immer undefined .
Um das Storage-Event zu empfangen, muss zunächst ein Listener registriert werden:
window.addEventListener('storage', function(e){
var msgNode, msg '';
msgNode document.getElementById('message');
msg + 'StorageArea: ' + ((e.storageArea localStorage) ?
"localStorage" : "sessionStorage") + '<br/>';
msg + 'Document URL: ' + e.url + '<br/>';
msg + 'Key: ' + e.key + '<br/>';
msg + 'OldValue: ' + e.oldValue + '<br/>';
msg + 'NewValue: ' + e.newValue + '<br/>';
msgNode.innerHTML msg;
}, true);
Schauen Sie sich online das Beispiel zum Storage-Event an, um dessen Ausprägungen zu
verstehen. Unter sehen Sie drei Screenshots, die dieses Beispiel zeigen.
Durch Anklicken des ersten Buttons wird ein Datumsobjekt unter dem Key myKey im
sessionStorage abgelegt. Das erneute Drücken überschreibt den Key myKey , somit
stand ein oldValue zur Verfügung. Der Aufruf von clear() durch Anklicken von
Clear all löscht alle Elemente und ist dadurch zu erkennen, dass key leer ist und
oldValue und newValue null sind.
Bild 2.61: Ein Beispiel zum Storage-Event.