<form method="post" action="#" name="Generator" id="generator" style="display: none;">
<table>
<tbody>
<tr>
<td>Ändere die Hintergrundfarbe - gib<br /> dazu irgend einen beliebigen <br /> HEX-Zahlen-Farbwert ein:</td>
<td><input style="text-align: center; width: 85px; font-size: 14px" name="bgcolor" value="#FFFFFF" type="text" /></td>
</tr>
<tr>
</tr>
</tbody>
</table>
<br />
<br />
<input type="button" onclick="javascript:generator(this.form)" value="Hintergrund ändern" />
</form>
<script type="text/javascript">
//Funktion checkt ob der Browser die entsprechende Html5 Funktion untersuetzt
function checkHtml5Support() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
function generator(form) {
//Wert der Input-Box einer Variablen zuweisen
var colorValue = form.bgcolor.value;
//Wert der Variable dem Hintergrund zuweisen
document.body.style.backgroundColor = colorValue;
//Wert der Variable lokal beim Benutzer unter dem key "backColor" speichern
localStorage.setItem("backColor", colorValue);
}
//Wenn der Browser Html5 unterstuetzt, dann...
if(checkHtml5Support) {
//Mache das form des Generators wieder sichtbar
//standardaessig ist dieses naemlich nicht sichtbar, damit auch nur User die Farbe aendern koennen, deren Browser auch das speichern unterstuetzt
document.getElementById("generator").style.display = "block";
//Hole die Hintergrundfarbe lokal vom Benutzter und weisse diese auch dem Hintergrund zu
document.body.style.backgroundColor = localStorage.getItem("backColor");
}
</script>
