Hallo in die Runde,
ich möchte gerne ein Zählwerk bauen was den Browser Speicher nutzt.
Es soll folgendermaßen ablaufen, beim Öffnen der HTML Seite wird der Browser Speicher als Variable eingelesen und wenn man nun den Count Button drückt wird auf den alten Wert eine "1" addiert und der neue Wert wieder abgespeichert.
Wenn man dann aber den Button „Löschen“ drücken würde, wird der Counter zurückgesetzt.
Ich möchte im Grunde genommen so in einer HTML Seite das Drücken eines Buttons zählen und anzeigen lassen und als Variabel weiter verwenden. Das Löschen soll nur über eine andere Seite möglich sein.
Code
<html>
<head>
<meta charset="utf-8">
<title>Test-Zähler mit Speicher</title>
<style>
*{
margin:0;
padding:0;
}
textarea{
height:100px;
width:200px;
}
</style>
</head>
<body>
<input type="button" value="Count" id="countButton">
<p>Du hast den Button <span id="displayCount">0</span> mal gedrückt.<br>Text:</p>
<textarea id="text"></textarea> <br>
<input type="button" value="Speichern" id="speichern">
<input type="button" value="Lesen" id="lesen">
<input type="button" value="loeschen" id="loeschen">
<script>
var data_save=0;
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
var data = document.getElementById("text");
if(window.localStorage.getItem('counter')){
var count=window.localStorage.getItem('counter');
data.innerHTML='Zahl '+count+' im localStorage gefunden,Counter wird ab da weiter gezählt';
data_save=1;
}else{
data.innerHTML='Localstorage( Counter ) ist leer';
}
display.innerHTML = count;
var speicher = document.getElementById("speichern");
var lesen = document.getElementById("lesen");
var loe = document.getElementById("loeschen");
button.addEventListener('click',function(){
count++;
display.innerHTML = count;
})
speicher.addEventListener('click',function(){
if(data_save==1){
data.innerHTML='Zahl '+count+' im localStorage Upgedatet';
}else{
data_save=1;
data.innerHTML='Counter wurde im Browser ( localstorage ) erstellt';
}
window.localStorage.setItem('counter', count);
})
lesen.addEventListener('click',function(){
if(data_save==1){
data.innerHTML='Zahl '+window.localStorage.getItem('counter')+' im localStorage gelesen';
}else{
data.innerHTML='Noch nix gespeichert';
}
})
loe.addEventListener('click',function(){
if(data_save==1){
data.innerHTML='counter gelöscht';
window.localStorage.clear('counter');
count=0;
data_save=0;
}else{
data.innerHTML='ERROR: Keine Counter Daten zum löschen vorhanden';
}
})
</script>
</body>
</html>