HTML-Formular mit Daten füllen, die im lokalen Speicher gespeichert wurden

Question

Meine Anwendung speichert die ausgefüllten Formulardaten (Eingabefelder mit ihren IDs und Werten) im lokalen Speicher und lädt sie sogar erfolgreich zurück, wobei die analysierten IDs und Werte wieder getrennt werden.

Das Problem ist, dass es mir nicht gelingt, das Formular aus den Daten, die nach dem Neuladen der Seite in Local Storage gespeichert wurden, wieder aufzufüllen. Gespeicherte Daten verbleiben in den Ressourcen des Browsers, und die Konsole protokolliert die korrekten Werte für jedes Eingabefeld. Auf der Seite selbst wird jedoch nichts angezeigt. Hier

ist ein Beispiel für meine HTML-Struktur:

<form id="myForm" method="post"> 
    <input type="submit" onclick="dataSave();" value="Save"> 
    <input class="formField" type="checkbox">Task done! 
    <input class="formField" type="text">How it went? 
</form> 

Und hier ist die aktuelle JavaScript, die das Speichern und Laden auf lokalen Speicher tut:

if (typeof(Storage) !== "undefined"){ 
 
    
 
    // Loading data 
 
    function dataLoad(){ 
 
     var inputParse = JSON.parse(localStorage.getItem('fieldString')); 
 
     var inputId; 
 
     var inputValue; 
 
     var inputType; 
 

 
     $.each(inputParse, function(key, value){ 
 
      inputId = key; 
 
      inputValue = value; 
 

 
      if (inputValue === "true" || inputValue === "false"){ 
 
       inputType = inputValue; 
 
      } 
 
     }); 
 

 
     
 
     $(".formField").each(function(){ 
 
      inputId = this.id; 
 
      document.getElementById(inputId); 
 
    
 
      if (inputType === "true"){ 
 
       $(inputId).attr("checked", "checked"); 
 
      } else { 
 
       $(inputId).val(inputValue); 
 
      } 
 
     }); 
 
    } 
 
    
 
    // Saving data 
 
    function dataSave(){ 
 
     var mngrFields = {}; 
 
     
 
     $(".mngr-field").each(function(){ 
 
      if (this.type == "radio" || this.type == "checkbox"){ 
 
       mngrFields[this.id] = this.checked; 
 
      } else { 
 
       mngrFields[this.id] = this.value; 
 
      } 
 
     }); 
 
     localStorage.setItem('fieldString', JSON.stringify(mngrFields)); 
 
    }

Und um die dataLoad() zu starten, nachdem die Seite geladen wurde, habe ich eine einfache dataLoad(); in meinem $(document).ready(function(){ });.

Wie bekomme ich das Formular mit den gespeicherten Daten ausgefüllt? Ich habe versucht, einige document.GetElementById Workarounds, aber kein Glück.

Answer 1

Die Aufgabe ist einfach:

• erhalten local Inhalt (aber erste Überprüfung ist es dort);
• überprüfen Sie für jede gespeicherte ID den HTML-Typ aus dem DOM (weil Sie es nicht vom aktuellen localStorage-Objekt kennen);
• zuweisen Wert oder überprüftes Attribut (wenn Radio/Checkbox) zu ihm;

Also hier ist es:

function dataLoad() { 
    if (localStorage.getItem('fieldString') !== null) { 
     var inputParse = JSON.parse(localStorage.getItem('fieldString')); 
     $.each(inputParse, function (key, value) { 
      var field = document.getElementById(key); 
      if(field.type == 'radio' || field.type == 'checkbox'){ 
       field.checked = value; 
      }else{ 
       field.value = value; 
      } 
     }); 
    } 
} 

Sie die Funktion Last automatisch auf Dokument aufrufen können oder es zu einem gewissen Taste zuweisen (wie Aktion speichern) - es liegt an dir.

Viel Glück!