LocalStorage nutzen

formular, javascript, localStorage, Storage.setItem

Seite 12

1 Kokarde

Hallo Jörg / Hallo Leute

Ich bin durch einen Tipp auf dieses Forum gekommen und bedanke mich erst mal an dieser Stelle für diese coole Plattform!

Mein Anliegen ist etwas speziell, habe aber gesehen dass es schon ein paar Einträge dazu hier gibt. Doch so recht komme ich, trotzt lesen, nicht voran.
Viel Berührung hatte ich zuvor noch nicht mit Javascript, jQuery ... aber ich kenne mich recht gut aus mit CSS und HTML. Doch Ihr müsst bitte ein wenig Rücksicht auf mich nehmen :))

Nun zum Problemchen.

Brauche eine kleine einfache Anwendung ohne Schnick-Schnack, die offline auf meinem MacBook im Browser (Chrome, Safari) läuft. Dazu sollen Werte über LocalStorage angelegt, gespeichert, editiert und wieder gelöscht werden können.

Aufmerksam bin ich geworden durch diesen Link:
https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/ASimpleExample/ASimpleExample.html

sowie diesen hier:
https://developers.google.com/web/tools/chrome-devtools/iterate/manage-data/local-storage?hl=en

Was habe ich bisher gemacht?

1. Ein Formular erstellt (formular.html)

<body>

<form method="GET" action="index.html" name="form">
        
<input name="formkaliber" type="text" value="0" size="5" maxlength="5" id="formkaliber"><br>
<input name="formstueckzahl" type="text" value="0" size="5" maxlength="5" id="formstueckzahl"><br>
<select name="formhersteller" size="1" id="formhersteller">
	<option value="Remington"> Remington </option>
	<option value="Hornady"> Hornady </option>
	<option value="C. Schuett (Kai1)"> C. Schuett (Kai1) </option>
</select>
<br><br>
<input type='submit' name='form' value='Formular absenden'>
<input type="reset" value="Loeschen">
</form>

</body>

2. Eine Auswertung erstellt (list.html)

<body>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    
          
    // Retrieve
    
    document.getElementById("kaliber").innerHTML = localStorage.getItem("amokaliber");
    document.getElementById("stueckzahl").innerHTML = localStorage.getItem("amostueckzahl");
    document.getElementById("hersteller").innerHTML = localStorage.getItem("amohersteller");  
    
    
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
    
</script>
    
       
    
<table>
    
    
    <tr>
    
    <td>KALIBER:</td>  <td>STUECKZAHL:</td>  <td>HERSTELLER:</td>
    
    </tr>
    
     <tr>
    
    <td><div id="kaliber"></div></td>  <td><div id="stueckzahl"></div></td>  <td><div id="hersteller"></div></td>
    
    </tr>
    </table>    
               
</body>

3. Eine Löschdatei erstellt (clear.html)

<body>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    
    
  localStorage.clear();  
    
alert("Clearing OK");
     
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
    
</script>
    
</body>

4. Eine Datei für die Ausführung der Aktion erstellt (index.html)

<body>
  
   <script> 
       
// Check browser support
if (typeof(Storage) !== "undefined") {
    
   var formkaliber1 = document.getElementById('formkaliber');
   var formstueckzahl1 = document.getElementById('formstueckzahl');
   var formhersteller1 = document.getElementById('formhersteller');
    
      alert("Stufe 1");
    
    // Store
    localStorage.setItem("amokaliber", formkaliber1);
    localStorage.setItem("amostueckzahl", formstueckzahl1);
    localStorage.setItem("amohersteller", formhersteller1);
    
      alert("Stufe 2");
    
    // Retrieve
    
    document.getElementById("kaliber").innerHTML = localStorage.getItem("amokaliber");
    document.getElementById("stueckzahl").innerHTML = localStorage.getItem("amostueckzahl");
    document.getElementById("hersteller").innerHTML = localStorage.getItem("amohersteller");
    
       alert("Stufe 3");
    
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
  

</script>
    
</body>

Info

Der String im Browser sieht so aus:

file:///Users/home/Ammo/index.html?formkaliber=0&formstueckzahl=0&formhersteller=Remington&form=Formular+absenden

Es werden also die Daten aus dem Formular übergeben, kommen aber irgendwie nicht korrekt im Script an.

Da Script läuft bis "Stufe 2" = der "alert" erscheint und hört dann auf.

Die Werte werden nicht in die localStorage geschrieben.

Sorry, falls das jetzt zu banal ist, aber ich bin gerade total blind und komme nicht voran.

Besonders, weil das hier eigentlich funktionieren müsste, aber den Wert "null" im alert ausgibt und nicht "Tom" wie es eigentlich sein müsste.

 <script> 
       
// Check browser support
if (typeof(Storage) !== "undefined") {
    
// Save data to sessionStorage
localStorage.setItem('myCat', 'Tom');

// Get saved data from sessionStorage
var data = localStorage..getItem('myCat');
    
    alert(data);
    
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

</script>

Gebe ich aber zusätzlich das hier ein, dann wird korrekt "Tom" ausgegeben.

alert(localStorage.getItem("myCat"));

Naja, egal .. ist ja nicht mein eigentliches Problem, sondern das oben 1-4

Würde mich über ein wenig Hilfe oder ein paar Tipps freuen.

Danke

Peace and Out :)

2 Jörg Kruse

   var formkaliber1 = document.getElementById('formkaliber');

Das wäre der Inhalt eines HTML-Elements mit der ID 'formkaliber' im selben HTML-Dokument, also in index.html. Du möchtest aber ja den Inhalt des Parameters formkaliber aus dem Query String.

In PHP könnten man hierzu auf $_GET['formkaliber'] zugriefen. In JavaScript gibt es eine solche einfache Möglichkeit leider nicht. Auf stackoverflow.com findet sich aber eine Funktion, die man verwenden kann, um die Parameter-Inhalte zu extrahieren:

http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters#answer-979995

Wenn du diese Funktionsdefinition in den script Abschnitt einbaust, kannst du den Parameter formkaliber folgendermaßen bestimmen:

   var formkaliber1 = QueryString.formkaliber;

3 Kokarde

Hi, vielen Dank für das schnelle Feedback!

Jetzt bin ich etwas überrascht, oder halt Enttäuscht, wie immer man das jetzt nehmen will.

Ich dachte echt, so ein Formular kann man nutzen um die Daten rüber zu schicken und dort weiter zu nutzen. Es gibt dazu auch viele andere Einträge die ich über google finde, aber nicht bei mir funktionieren.

Ich habe gerade mit den Google-Dev Tools, die ja in Chrome enthalten sind, festgestellt dass tatsächlich die Daten angelegt werden.
Leider halt immer nur mit dem Wert "null", wie Du ja auch bestätigst.
Das sieht dann so aus:
KEY = amohersteller VALUE = null
KEY = amokaliber VALUE = null
KEY = amostueckzahl VALUE = null

Wenn ich das richtig deute, dann könnte ich das Formular auch in die index.html einbauen, dann müsste es gehen?

In einem anderen Forum fand ich den Hinweis auf:
document.getElementById('formkaliber').value;

Das soll angeblich den Wert aus einem Feld auslesen und nutzen.
Doch vermutlich ebenso nur dann, wenn im gleichen HTML Dokument genutzt.

4 Jörg Kruse

Ich dachte echt, so ein Formular kann man nutzen um die Daten rüber zu schicken und dort weiter zu nutzen.

Ja, und das geschieht eben über den Query String:

formkaliber=0&formstueckzahl=0&formhersteller=Remington&form=Formular+absenden

Wenn ich das richtig deute, dann könnte ich das Formular auch in die index.html einbauen, dann müsste es gehen?

Nicht mit diesem Submit-Formular. Dieses versendet die Parameter dann an die index.html - hierbei handelt es sich aber um eine neuen Seitenaufruf, auch wenn die URL die gleiche ist.

Alternativ könntest du ein Button-Formular verwenden, welches das Formular nicht absendet.

Also statt dem hier:

<input type='submit' name='form' value='Formular absenden'>

.. so etwas:

<input type='button' onclick="storeValues()" name='form' value='Formular absenden'>

Im onclick Attribut rufst du eine Funktion auf, die du im script Abschnitt definierst:

function  storeValues()
{
    var formkaliber1 = document.getElementById('formkaliber').value;
    // ...
}

5 Kokarde

Cool, Danke, ich werde mich mal dran setzen :)

6 Kokarde

Ich hoffe, ich bringe jetzt keine Unruhe rein, aber mir fällt gerade etwas auf.
Wenn ich das alles so wie oben belasse, passiert in LocalStorage folgendes, wie man schon im Chrome Browser mit den Entwicklertools sehen kann.

=> Setze ich die 3 Werte per Hand von "null" auf einen Wert, wie z. B. amohersteller = X, amokaliber = 1 und amostueckzahl = 2

dann lassen diese sich mit einem alert ausgeben und werden korrekt angezeigt, klar, kein Problem.

Starte ich jetzt aber formular.htm, mit GET, werden die bereits vorhanden werte wieder mit "null" überschrieben. Also scheint ja doch was zu passieren.

Nur das halt anstatt der zu übergebenden Werte, nur "null" gesetzt wird, weil ja in der Variablen nix ankommt :(

Mal blöde gefragt.
So was wie das hier, wo man eine Unbekannt übergeben kann, gibt es nicht?

tx.executeSql('INSERT INTO KISTE2 (id, kaliber, hersteller, anzahl) VALUES (?, "555", "Remington", "1000")',[timestamp]);

Hier wird "timestamp" aus einer Übergabe eines Formulars in das "?" eingesetzt.

Sowas geht bei LocalStorage nicht?

7 Kokarde

OK; erledigt! Ich habe es geschafft, Dank dem Tipp von Dir auf http://stackoverflow.com. Der Beitrag kann daher geschlossen werden!

So sieht es aus und es funktioniert wunderbar, doch "leider" ist es nicht die Lösung für mein Problem, denn ich brauche ja mehrere Einträge und LocalStorage (file://) kann immer nur einen einzigen Eintrag, also z. B. immer nur Daten für einen Hersteller.

Ich weiche daher auf Web SQL aus ... vermutlich muss ich dazu dann auch blöde Fragen stellen :)))

1. Mein Formular (formular.html)

<form method="GET" action="index.html" name="form">
        
<input name="formkaliber" type="text" value="0" size="5" maxlength="5" id="formkaliber"><br>
<input name="formstueckzahl" type="text" value="0" size="5" maxlength="5" id="formstueckzahl"><br>
<select name="formhersteller" size="1" id="formhersteller">
	<option value="Remington"> Remington </option>
	<option value="Hornady"> Hornady </option>
	<option value="Christian-Kai1"> Christian, Kai1</option>
</select>
<br><br>
<input type='submit' name='form' value='Formular absenden'>
<input type="reset" value="Loeschen">
</form>

2. Meine Ausführung der Aktion (index.html)

 <script> 
      
// Zeitstempel für späteres Schreiben in die LocalStorage oder als Testausgabe

       var timestamp = Date.now();
       
// Einbindung  der ganzen Aktion in einen Check browser support

if (typeof(Storage) !== "undefined") {
    
    // Beginn zerschneiden der Übergabe vom Formular

    // Stringübergabe aus dem Formular einlesen

    var url = window.location.href; 

     // zerschneiden der Stringübergabe vom Formular, für jedes Feld im Formular nötig! 
    
    var kaliber = /formkaliber=([^&]+)/.exec(url)[1]; 
    var stueckzahl = /formstueckzahl=([^&]+)/.exec(url)[1]; 
    var hersteller = /formhersteller=([^&]+)/.exec(url)[1]; 
    
     // Variablen für LocalStorage vorab setzen und derzeitigen Wert aus LocalStorage zuweisen

    var amokaliber = localStorage.getItem("amokaliber");
    var amostueckzahl = localStorage.getItem("amostueckzahl");
    var amohersteller = localStorage.getItem("amohersteller");
    
    // Test: Ausgabe der geschnittenen Variablen aus dem String als Alert-Fenster, kann später aaskommentiert werden, prüfe so ob Übergabe korrekt erfolgt ist

alert(kaliber);
alert(stueckzahl);
alert(hersteller);    
      
    // Schreiben der Daten in den LocalStore

    localStorage.setItem("amokaliber", kaliber);
    localStorage.setItem("amostueckzahl", stueckzahl);
    localStorage.setItem("amohersteller", hersteller);
    localStorage.setItem("id", timestamp);
    
     // Hinweisfenster das LocalStore erledigt
    
       alert("READY");
    
   // Abschnitt wenn Prüfung ob LocalStorage unterstützt wird negativ ausfällt
    
} 

else {

// Ausgabe des Textes das LocalStorage nicht unterstützt wird

    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage / LocalStorage ...";

}

Am Ende steht dann in der LocalStorage je ein Wert für die Formulardaten.

ThanX

8 Jörg Kruse

doch "leider" ist es nicht die Lösung für mein Problem, denn ich brauche ja mehrere Einträge und LocalStorage (file://) kann immer nur einen einzigen Eintrag, also z. B. immer nur Daten für einen Hersteller.

Mkithilfe von JSON kann man auch Arrays in localStorage speichern:

http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage

9 Jörg

Die Web SQL Beiträge habe ich in einen separaten Thread verschoben:

Web SQL nutzen

10 Kokarde

Danke Jörg

Aber LocalStorage kommt überhaupt nicht in Frage.
Grundsätzlich kannst Du diesen Thread closen.

Ich mache jetzt einen auf für indexDB :)

Seite 12

nach oben weiter >

LocalStorage nutzen

Verwandte Themen