webentwicklung-frage-antwort-db.com.de

Eingabewerte lokal speichern und laden?

Ich versuche, alle Formularfeldwerte (unter der Eingabe-ID) wie folgt über den lokalen Speicher zu speichern: localStorage.setItem("input id", fieldvalue);, wenn ein Benutzer auf die Schaltfläche "Speichern" klickt. Der Grund dafür ist, dass der Benutzer zu einem späteren Zeitpunkt die Option hat, die Formularfeldwerte neu zu laden, anstatt alles neu einzugeben, was das Problem ist. Die Eingabe-ID und die Namensfelder sind nicht bekannt, da sie abhängig von der Auswahl des Benutzers auf der vorherigen Seite generiert werden (welche Vorlage sie wählen).

Demo (Angenommen, dies wurde generiert):

<input type="text" id="meta_title" name="seo_meta_title"> 
<input type="text" id="meta_description" name="seo_meta_description"> 
<input type="text" id="header" name="header"> 

<!-- Submit form-->
  <input type="submit" value="Create">

<!-- buttons-->
  <button onclick="save()">save</button>
  <button onclick="load()">load</button>

da ich die eingabe-ids nicht kenne, kann ich nicht einfach schreiben:

function save() {
  if (typeof(Storage) != "undefined") {

    //some_code_to_insert_value = x, y, z 

    localStorage.setItem("meta_title", x);
    localStorage.setItem("meta_description", y);
    localStorage.setItem("header", z);
   }
}

Gleiches gilt für die Ladefunktion

// LOAD
function load() {
if (typeof(Storage) != "undefined") {
   // Adds data back into form fields 

   document.getElementById("meta_title").value = localStorage.getItem("meta_title");
   document.getElementById("meta_description").value = localStorage.getItem("meta_description");
   document.getElementById("header").value = localStorage.getItem("header");

    }
}

Ich bin sehr neu in JavaScript, da ich mir sicher bin, dass Sie jede Hilfe, jeden Code oder jeden Link zu schätzen wissen. Eine funktionierende JS-Geige wäre unglaublich (solange es nicht darauf ankommt, die Eingabe-ID vorher zu kennen) etc ..) Ich habe ein paar Stunden damit verbracht, dies zu tun und noch mehr Zeit damit verschwendet, das mit PHP benötigte JS zu generieren, bis mir gesagt wurde, dass dies ein schrecklicher Weg war, es zu tun.

5
Dan Fisher

Wenn Sie sich auf jQuery verlassen möchten, kann dies Ihnen helfen:

$('#save').on('click', function(){

    $('input[type="text"]').each(function(){    
        var id = $(this).attr('id');
        var value = $(this).val();
       localStorage.setItem(id, value);

    });   
});

$('#load').on('click', function(){
    $('input[type="text"]').each(function(){    
        var id = $(this).attr('id');
        var value = localStorage.getItem(id);

        $(this).val(value);

    }); 
});

Ich würde empfehlen, Inline-Js zu vermeiden, daher habe ich den Code aktualisiert, um .on () zum Anhängen des Handlers click an die beiden Schaltflächen zu verwenden.

Demo

Referenz:

.jeder()

15
empiric
   Replace Html Code And Script File 
   <form method='post' id='myform'>
    <input type="text" id="meta_title" name="seo_meta_title"> 
    <input type="text" id="meta_description" name="seo_meta_description"> 
    <input type="text" id="header" name="header"> 

    <!-- Submit form-->
      <input type="submit" id="save" value="Create">

    <!-- buttons-->
      <button onclick="save()">save</button>
      <button onclick="load()">load</button>
    </form>
    <script>
    $('#save').on('click', function(){
       var post_vars = $('#myform').serializeArray();
       localStorage.setItem(id, post_vars);
    });
    </script>
0
Rocky Kumar