Zähler und Browser Speicher

  • 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 Button zählen und anzeigen lassen und als Variabel weiter verwenden. Das Löschen soll nur über eine andere Seite möglich sein.


    Hier mein Test-Script:


    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Test-Zähler mit Speicher</title>

    </head>


    <body>

    <input type="button" value="Count" id="countButton" />


    <p>Du hast den Button <span id="displayCount">0</span> gedrueckt.</p>


    <script type="text/javascript">

    var count = 0;

    var button = document.getElementById("countButton");

    var display = document.getElementById("displayCount");


    button.onclick = function(){

    count++;

    display.innerHTML = count;

    }


    function speichern() {

    var key = 1;

    var data = display.innerHTML;

    window.localStorage.setItem(key, data);

    }


    function lesen() {

    var key = 1;

    var data = display.innerHTML;

    document.getElementById('data').value = window.localStorage.getItem(key);

    }


    function loeschen() {

    var key = 1;

    var data = display.innerHTML;

    document.getElementById('data').value = window.localStorage.clear(key);

    }

    </script>


    </head>

    <body>


    Text: <br>

    <textarea id="data"></textarea> <br>

    <input type="button" value="Speichern" onclick="speichern()">

    <input type="button" value="Lesen" onclick="lesen()">

    <input type="button" value="loeschen" onclick="loeschen()">

    </body>

    </html>


    Vielen Dank an alle

  • Ich möchte im Grunde genommen so in einer HTML Seite das drücken eines Button zählen und anzeigen lassen

    Das sieht doch schon mal ganz gut aus bis auf ein paar Kleinigkeiten und das Html.
    Was meinst du den genau mit

    Das Löschen soll nur über eine andere Seite möglich sein.

    Weil andere Seite geht, nur wenn der Host gleich bleibt, ansonsten sind andere mittel notwendig.
    Du kannst auch nicht von deiner Homepage aus auf den local.session speicher von Codepen oder Co zugreifen.
    Ps: Als Key eine 1 zu verwenden ist vielleicht etwas verwirrend,z. B. “Counter“ oder so wäre verständlicher.

  • Hi basti1012,

    nun das ganze Projekt besteht nur aus einer HTML Datei ohne Server. Der Benutzer öffnet die HTML Datei und beantwortet einige Fragen, dann werden diese Frage bewertet und genau das Drücke der Bewertungstaste möchte ich festhalten für den Moment. Wenn dann die Bewertung per Email verschickt wird, möchte ich die Anzahl der bis dahin gedrückten Bewertung mit verschicken. So der grobe Plan und das mit dem löschen habe ich noch nicht ganz zu ende überlegt. Ich denke das ich diese Funktion einfach weglassen werde. Oder könnte man einen Button auch verstecken ?


    Hast du eine Idee zu meinen Fragen ? Wie kann ich es schaffen das der Inhalt des Speichern beim öffnen der Seite automatisch gelesen wird und als Startvariable verwendet wird und nicht wie bei mir die "0"? Wie kann ich die Count Taste und das Speichern zusammen fügen ?

  • Hast du eine Idee zu meinen Fragen ? Wie kann ich es schaffen das der Inhalt des Speichern beim öffnen der Seite automatisch gelesen wird und als Startvariable verwendet wird und nicht wie bei mir die "0"? Wie kann ich die Count Taste und das Speichern zusammen fügen ?

    Dein Code ist ja so weit schon gar nicht so schlecht.
    Bisschen sortieren und paar Sachen ändern und dann läuft es schon.
    Du musst beim Seite betreten erst den speicher auslesen und prüfen, ob was gespeichert ist und dann einfügen.

    Habe da mal etwas mehr an Abfragen reingemacht damit man es besser versteht, wann welcher Speicher da ist und so.

    So ungefähr.
    https://basti1012.bplaced.net/…rdner=html-seminar&id=429

    Das löschen könntest du auch automatisch machen, wenn du die E-Mail versendest, bzw. das an der E-Mail weitergibst.

    Das speichern könnte man auch gleich beim Counter Button mit einfügen, dann wird es gleich gespeichert und kann nicht vergessen werden.

  • Wau super vielen Dank.

    Meinst du wir könnten den Button Speichern und Lesen und das Info Feld auch noch weg bekommen?

    Sodas nur noch der Button "Count" und "Löschen" vorhanden ist.

    Durch drücken auf den Button "Count" wird dann auch gleich gespeichert und gelesen wird beim öffnen der Seite.

    Löschen kann dann so bleiben, das ist jetzt schon perfekt.

  • Ok habe es probiert, läuft so weit. Aber die TextArea bekomme ich noch nicht weg.

    Könntest du mir da bitte noch einmal helfen?


    <html>

    <head>

    <meta charset="utf-8">

    <title>Test-Zähler mit Speicher</title>

    </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="loeschen" id="loeschen">

    </body>

    </html>


    <script type="text/javascript">


    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_save=1;

    }

    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;

    })


    button.addEventListener('click',function(){

    if(data_save==1){

    }else{

    data_save=1;

    data.innerHTML='';

    }

    window.localStorage.setItem('counter', count);

    })


    loe.addEventListener('click',function(){

    if(data_save==1){

    data.innerHTML='';

    window.localStorage.clear('counter');

    count=0;

    data_save=0;

    }else{

    data.innerHTML='';

    }

    })

    </script>

  • Haben eben das noch mit der "textarea" hinbekommen haben diese gegen <span id="text"></span> ausgewechselt.

    Ist das Skript so jetzt ordentlich programmiert, oder würdest du noch etwas optimieren?


    Hast du vielleicht noch eine Idee wie ich den Button zum löschen verstecken könnte.

    Ich möchte gerne das nur in einem Ausnahmefall der Counter zurückgesetzt werden kann.


    Cool wäre es wenn man einen Code eingeben müsste zum zurücksetzen. Aber das bekomme ich noch nicht hin.

  • Haben eben das noch mit der "textarea" hinbekommen haben diese gegen <span id="text"></span> ausgewechselt.

    Jetzt steht da nichts mehr?

    Das ist aber fusch.

    Lösche den Span komplett

    lösche die Zeilen data.innerHTML='';

    und das var data = document.getElementById("text");
    Dann sollte es richtig weg sein.

    Hast du vielleicht noch eine Idee wie ich den Button zum löschen verstecken könnte.

    Ich möchte gerne das nur in einem Ausnahmefall der Counter zurückgesetzt werden kann.

    Klar.

    display:none;

    Nur wann ist der Ausnahmefall?

    Wie soll der Button wieder sichtbar werden ,durch noch ein Button?

    Cool wäre es wenn man einen Code eingeben müsste zum zurücksetzen. Aber das bekomme ich noch nicht hin.

    Das ginge auch.

    Hier im Forum gibt es gerade ein Thema wie man mit Passwörter so was machen kann.

    Der Nachteil ist, dass man bei Javascript die Passwörter im Code sehen kann.

    Man könnte es auch verschlüsseln.

    Versuch mal das Passwort herauszufinden.

    * Link entfernt, weil existiert nicht mehr *


    Wenn das PW richtig ist, könnte man den Button einblenden.

    Jetzt gibt es aber ein neues Problem.

    Das Passwort kann man umgehen und gleich einfach über die Konsole gehen und dann kannst du den Button gleich einblenden , ohne das Passwort zu kennen.

    Für spiele rein und nicht wichtige Daten könnte man das so machen.

    Ansonsten ist in diesen Fall Javascript der falsche Weg.


    Das sollte man mit PHP machen.

  • Versuch mal das Passwort rauszufinden.

    https://codepen.io/basti1012/pen/QWNjYrX?editors=0010

    Wozu? Wie du schon schriebst lässt sich das umgehen: der Code lässt sich problemlos so manipulieren dass die Passwortabfrage immer true ergibt, egal was man eingibt. Clientseitiges Javascript darf niemals für einen "Passwort-Schutz" verwendet werden, auch nicht für "nicht wichtige Daten" - wenn die Daten nicht wichtig sind, kann man den "Schutz" auch weg lassen. Wenn es einen Schutz braucht, dann muss es immer eine serverseitige Sprache sein (nicht zwingend PHP, gibt ja noch genug andere).

  • @basti1012

    Also ich finde das Skript super und für meinen Fall völlig ausreichend.

    Das Passwort müsste das hier sein : c249b3a6c0eaef9a4d48f6ca588b526b allerdings vermark ich den MD5 Code es noch nicht zu entschlüsseln.

    Dafür fehlt mir irgendwie die düsteren Vorkenntnisse. :) Gehört zu diesem Skript dann auch noch eine Seite um das Passwort zu verschlüsseln?

    Ich habe mir übrigens auch noch etwas überlegt um den Button zu verstecken.

    <input accesskey="h" type="button" accesskey="h" value="loeschen" id="loeschen" style="display:none">

    Komplett ausblenden und dann über eine Tastenkombination nutzen. Klar wenn die erstmal bekannt ist, muss ich das im Skript wieder ändern.


    Wollen wir das mal mit dem Passwort probieren ? Ich denke das wäre eine echte schöne Lösung.

    Wir könnten es doch auch so programmieren, das wir durch eine Tastenkombination das Feld für die Passwort Eingabe eingeblendet und durch das richtig Passwort der Counter zurücksetzen. Wäre das so mach bar ?

  • tk1234 das ist richtig das PHP oder Co besser ist.
    Für spielerein kann man das ja nehmen(wo keine Daten oder Gewinnspiele hinter hängen)
    tigger30926 wie schon gesagt wurde solltest du mit Js keine Passwörter vergeben.
    In deinen Fall ist das vielleicht OK.
    Wer das Passwort knacken oder umgehen will, nur um den Eintrag in den localstorage zu löschen der hat auch sonst nix zu tun.
    Den Eintrag kann man auch über die Console löschen.
    Md5: Es ist nicht empfohlen, diese Funktion zu verwenden um Passwörter zu hashen, gerade bei Login Daten und Co.
    Hier hat mal einer was zu geschrieben wie das mit hashen und verschlüsseln geht.
    Enschlüsselung des Passwortes beim Login

  • basti1012 Ok da hast du völlig recht. Dennoch würde ich es sehr gerne mit deinem Skript Vorschlagen es mal probieren. Kannst du mir kurz verraten wie ich in diesem Skript eine neues Passwort setze? Dann könnte ich mal probieren es einzubauen, wenn das ok für dich ist das ich das Skript benutze?

  • Dennoch würde ich es sehr gerne mit deinem Skript Vorschlagen es mal probieren. Kannst du mir kurz verraten wie ich in diesem Skript eine neues Passwort setze?

    Ich glaube das zu erklären ist nix für mich.

    Habe das Script geändert damit man sich ein MD5 Passwort erstellen kann und das dann im Code ändern kann

  • basti1012 Ok das kann ich verstehen. Aber das wollte ich auch gar nicht von Dir. Ich bin dir sowieso schon so dankbar für alles.

    Ich habe das alles mal zusammen gebaut und es läuft prima.

    Bis auf eine Kleinigkeit, ich habe bei der richtigen Passworteingabe folgendes eingetragen :


    inf.innerHTML='<input type="button" value="Zaehler zurücksetzen" id="loeschen">';


    Der Button erscheint auch aber leider noch ohne eine Funktion. Er setzt den Zähler nicht zurück.


    So sah die alte Codezeile aus : <input accesskey="h" type="button" value="Zaehler zurücksetzen" id="loeschen" style="display:none;"></th>


    Diese Funktioniert einwandfrei, was mache ich falsch ? Kannst du mir bitte noch einmal auf die Sprünge helfen?

  • Du hast bestimmt ein Fehler in der Konsole ( loeschen is undefined, oder so) , kann das sein?
    Wenn das so ist, wird der Error davon kommen, weil der JS Code nach dem Button sucht und der ist ja nicht da.
    Besser ist es wie du es vorher hattest, oder du startest (erstellen,einfügen oder Co) den JS Code der den Button sucht ( document.getElementById('loeschen') ...... ) erst dann, wenn der Button eingeblendet wurde ( in deinem Fall wird er ja erst erstellt.
    Ich weiß, meine Erklärungen sind Mist.
    Kannst du mal deinen Code verlinken, oder Codepen erstellen oder posten?

  • Da geht ja jetzt fast gar nix.

    Das

    Code
    1. type="text/javascript"

    hat kein sinn ,gerade wenn es einfach mitten im Code steht.

    Code
    1. <input accesskey="h" type="button" value="Zaehler zurücksetzen (Alte Funktion)" id="loeschen">
    2. und
    3. <input type="button" value="Zaehler zurücksetzen (Neue Funktion)" id="loeschen">

    im gleichem Code geht nicht, weil nee ID einzigartig sein muss.

    Ich hoffe mal das dein HTML Code bei dir vollständig ist.Da fehlt jetzt ja doctype,HTML,Body.
    Onclick ist auch Mist, da benutzt man EventListener für.
    Mal von dem ganzen Kram abgesehen solltest du mal den lösch EventListener da hinsetzen, wo der Button erstellt wird

    ungetestet