web-dev-qa-db-fra.com

Enregistrer et charger les valeurs d'entrée au stockage local?

J'essaie de stocker via le stockage local toutes les valeurs de champs de formulaire (sous l'ID d'entrée), comme suit: localStorage.setItem("input id", fieldvalue); lorsqu'un utilisateur clique sur le bouton "Enregistrer". la raison en est ainsi à une date ultérieure, l'utilisateur a la possibilité de recharger les valeurs des champs de formulaire au lieu de ressaisir tout le problème. Le problème est que l'ID d'entrée et les champs de nom ne sont pas connus car ils sont générés en fonction de ce que l'utilisateur a sélectionné dans la page précédente. (quel modèle ils choisissent).

Démo (disons que cela a été généré):

<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>

parce que je ne connais pas les identifiants d'entrée, je ne peux pas écrire:

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);
   }
}

Et pareil pour la fonction de chargement

// 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");

    }
}

Je suis très novice en JavaScript, car je suis sûr que vous pouvez dire que toute aide, code ou liens seraient très appréciés et qu'un violon de travail en js serait plus qu'étonnant (tant qu'il ne repose pas sur une connaissance préalable de l'identifiant d'entrée etc ..) J'ai passé quelques heures à essayer de faire cela et j'ai encore perdu du temps à générer le JS nécessaire avec PHP jusqu'à ce qu'on me dise que c'était une façon terrible de le faire.

javascriptphpjqueryhtmllocal-storage
5
Dan Fisher

Si vous voulez utiliser jQuery, cela peut vous aider:

$('#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);

    }); 
});

Je recommanderais d'éviter inline-js, j'ai donc mis à jour pour utiliser .on () pour attacher le gestionnaire click- aux deux boutons.

Démo

Référence:

.chaque()

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