Er zijn verschillende manieren om gegevens die binnen een website aangepast worden op te slaan. De eenvoudigste manier is om gebruik te maken van de localStorage. We bekijken hier een simpele manier om de hoogste score op te slaan. We beginnen met een getal op te slaan in een variabel. Vervolgens wordt de variabel verhuisd naar de localStorage.
Om te beginnen hebben we een input-veld nodig waarin we een getal kunnen invoeren. Ook hebben we een knop nodig waar we op kunnen klikken om het getal op te slaan.
<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
</body>
Nadat we jQuery gelinkt hebben kunnen we de knop “opslaan” naar de muisklik laten luisteren. Voordat er jQuery opdrachten uitgevoerd mogen worden willen we zeker weten dat het document klaar/geladen is.
<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(e)
{
});
</script>
</body>
Nu kunnen we de knop “opslaan” naar de muis laten luisteren.
<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(e)
{
$(“input[value=opslaan]”).click();
});
</script>
</body>
Als er op de knop “opslaan” geklikt wordt, wordt de inhoud van het invoerveld “name” gelezen en opgeslagen in de variabel “nieuwGetal”. Vervolgens controleren we de waarde van “nieuwGetal” in een pop-up venster.
<script>
var nieuwGetal;
$(document).ready(function(e)
{
$(“input[value=opslaan]”).click(function(e)
{
nieuwGetal=$(“input[name=nieuw]”).val();
alert(nieuwGetal)
});
});
</script>
De ingevoerde waarde van “nieuwGetal” wordt door de browser onthouden totdat er een nieuwe waarde ingevuld wordt, of totdat het tabblad weg geklikt wordt. We kunnen de localStorage gebruiken om de browser het getal ook te laten onthouden als het tabblad, of zelfs de hele browser gesloten wordt. Binnen de localStorage maken we een variabel aan met de naam “opgeslagen”. Die variabel krijgt de waarde van “nieuwGetal”.
<script>
var nieuwGetal;
$(document).ready(function(e)
{
$(“input[value=opslaan]”).click(function(e)
{
nieuwGetal=$(“input[name=nieuw]”).val();
//alert(nieuwGetal);
localStorage.opgeslagen=nieuwGetal;
alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
});
});
</script>
Om een soort ‘hoogste score’ weergave te krijgen moeten we ervoor zorgen dat niet elk willekeurig getal opgeslagen kan worden in de localStorage. Het getal mag alleen opgeslagen worden als het hoger is dan het getal dat al opgeslagen is. Daarvoor moeten we wel zeker weten dat de waarde van “nieuwGetal” gelezen wordt als een cijfer, niet als een tekst. We gebruiken de functie “Number()” om de waarde van het tekstveld met de naam “nieuw” te lezen als een getal.
<script>
var nieuwGetal;
$(document).ready(function(e)
{
$(“input[value=opslaan]”).click(function(e)
{
nieuwGetal=Number($(“input[name=nieuw]”).val());
//alert(nieuwGetal);
localStorage.opgeslagen=nieuwGetal;
alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
});
});
</script>
Voordat de waarde van “nieuwGetal” opgeslagen wordt in de localStorage moet gecontroleerd worden of het getal wel hoger is dan het getal dat al opgeslagen is. Daarvoor moeten we eerst controleren of er al een getal opgeslagen is in de localStorage. Als dat niet zo is wordt er een waarde “0” gegeven aan de variabel “opgeslagen” in de localStorage.
<script>
var nieuwGetal;
$(document).ready(function(e)
{
if(localStorage.opgeslagen)
{
alert(“In de localStorage is opgeslagen:”+ localStorage.opgeslagen);
}
else
{
localStorage.opgeslagen=0;
alert(“het getal 0 is opgeslagen in de localStorage”)
}
$(“input[value=opslaan]”).click(function(e)
{
nieuwGetal=Number($(“input[name=nieuw]”).val());
//alert(nieuwGetal);
localStorage.opgeslagen=nieuwGetal;
alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
});
});
</script>
Voordat er een nieuw getal opgeslagen wordt eerst gecontroleerd of het nieuwe getal wel hoger is dan het opgeslagen getal in de localStorage. Daarvoor moet de klikfunctie van de knop “opslaan” aangepast worden:
$(“input[value=opslaan]”).click(function(e)
{
nieuwGetal=Number($(“input[name=nieuw]”).val());
//alert(nieuwGetal);
if(nieuwGetal > localStorage.opgeslagen)
{
localStorage.opgeslagen=nieuwGetal;
alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
}
else
{
alert(“voer een hoger getal in dan: “+ localStorage.opgeslagen);
}
});
De waarde van de variabel “opgeslagen” wordt nu door de browser onthouden (tot de cache gewist wordt). Als laatste stap kijken we naar de mogelijkheid om de gegevens in de localStorage zelf te wissen. Eerst hebben we een nieuwe knop nodig:
<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
<input type=”button” value=”wissen”>
Vervolgens geven we de nieuwe knop “wissen” een klikfunctie. Als er op de knop geklikt wordt wordt het item “opgeslagen” gewist uit de localStorage:
<script>
var nieuwGetal;
$(document).ready(function(e)
{
if(localStorage.opgeslagen)
{
alert(“In de localStorage is opgeslagen:”+ localStorage.opgeslagen);
}
else
{
localStorage.opgeslagen=0;
alert(“het getal 0 is opgeslagen in de localStorage”)
}
$(“input[value=opslaan]”).click(function(e)
{
nieuwGetal=Number($(“input[name=nieuw]”).val());
//alert(nieuwGetal);
if(nieuwGetal>localStorage.opgeslagen)
{
localStorage.opgeslagen=nieuwGetal;
alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
}
else
{
alert(“voer een hoger getal in dan: “+ localStorage.opgeslagen);
}
});
$(“input[value=wissen]”).click(function(e)
{
localStorage.removeItem(“opgeslagen”);
});
});
</script>
<script>