1
votes

Conserver les éléments ajoutés par JavaScript après avoir actualisé la page

Je veux que mes éléments ajoutés restent les mêmes après l'actualisation de la page.

Par exemple, lorsque j'enregistre un utilisateur, les données sont ajoutées à une ligne de tableau. Je veux ajouter de nouveaux utilisateurs, mais je veux que ceux que j'ai ajoutés avant restent également dans le tableau.

 var myUser = localStorage.getItem("ad");

if (myUser) {

  var yeni = ("<tr><td>" + localStorage.getItem("ad") + "</td>" +
    "<td>" + localStorage.getItem("soyad") + "</td>" +
    "<td>" + localStorage.getItem("email") + "</td>" +
    "<td>" + localStorage.getItem("sheher") +
    "<td>" + "<input type='checkbox' name='sil'></td></tr>");
    
  $(".myTable table tbody").append(yeni);
  
}
  J'ai essayé ceci, mais cela ne fonctionne qu'une seule fois:  
 
 

$("#tesdiq").click(function () 
    $(".regForm").hide();
    $(".myTable").show();

    var ad = $("#ad").val();
    var soyad = $("#soyad").val();
    var email = $("#email").val();
    var sheher = $("#sheher").val();

    var infolar = ("<tr><td>" + ad + "</td>" + "<td>" + soyad + "</td>" + "<td>" + email + "</td>" + "<td>" + sheher + "<td>" + "<input type='checkbox' name='sil'></td></tr>");

    $(".myTable table tbody").append(infolar);


localStorage.setItem("ad", ad);
localStorage.setItem("soyad",soyad);
localStorage.setItem("email",email);
localStorage.setItem("sheher",sheher);

javascript html local-storage

6 commentaires

On dirait que vous êtes en partie là-bas. Extrayez les données du stockage local et remplissez la table. Qu'est-ce qui ne va pas?

Je ne sais pas comment le faire(

J'ai essayé d'obtenir un article mais cela ne semble pas fonctionner

Il peut être utile de montrer ce que vous avez essayé et ce qui ne va pas. Il est utile d'inclure un exemple minimal et reproductible qui illustre le problème.

J'ai essayé mais cela ne fonctionne qu'une seule fois var myUser = localStorage.getItem ("ad"); if (monUtilisateur) {var yeni = (" " + localStorage.getItem ("ad") + "" + "" + localStorage.getItem ("soyad") + " "+" "+ localStorage.getItem (" email ") +" "+" "+ localStorage.getItem (" sheher ") +" "+" "); $ (". myTable table tbody"). append (yeni); }

Laissez-moi expliquer. c'est un formulaire d'inscription et il y aura des utilisateurs. Par exemple, j'ai un utilisateur enregistré, il sera ajouté à une ligne avec son nom et ses informations. Je veux qu'un nouvel utilisateur annonce mais reste celui que j'ai ajouté auparavant dans le tableau aussi.

3 Réponses :

0
votes

$("#tesdiq").click(function () 
    $(".regForm").hide();
    $(".myTable").show();

    var ad = localStorage.getItem("ad") || $("#ad").val();
    var soyad = localStorage.getItem("soyad") || $("#soyad").val();
    var email = localStorage.getItem("email") || $("#email").val();
    var sheher = localStorage.getItem("sheher") ||  $("#sheher").val();

    var infolar = ("<tr><td>" + ad + "</td>" + "<td>" + soyad + "</td>" + "<td>" + email + "</td>" + "<td>" + sheher + "<td>" + "<input type='checkbox' name='sil'></td></tr>");

    $(".myTable table tbody").append(infolar);


localStorage.setItem("ad", ad);
localStorage.setItem("soyad",soyad);
localStorage.setItem("email",email);
localStorage.setItem("sheher",sheher);

1 commentaires

L'événement Click sert à ajouter une nouvelle ligne à ma table. C'est comme un formulaire d'inscription. lorsque je clique sur le bouton, cela ajoute un nouvel utilisateur et je veux qu'il reste le même après l'actualisation

0
votes

vous ne pouvez pas rester le même dans la page après l'actualisation, car cela fonctionne sur un événement de clic

$("#tesdiq").click(function () {}

Vous devriez écrire ceci sur l'événement onload, puis il sera là après l'actualisation p >

1 commentaires

0
votes

Je recommande d'utiliser JSON pour enregistrer les données de formulaire en tant qu'objets dans un tableau.

Vous pouvez sérialiser les données de formulaire, créer un objet et le pousser dans un tableau. Utilisez ensuite JSON.stringify code> pour convertir le tableau d'objets résultant en une chaîne JSON et le stocker dans le stockage local. Lorsque vous récupérez les données du stockage local, vous pouvez utiliser JSON.parse pour reconvertir le JSON en un tableau d'objets. Vous pouvez ensuite ajouter les données de ces objets au tableau HTML.

Il semble que vous utilisiez jQuery, je l'ai donc utilisé dans mon exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="userTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Phone Number</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<form id="regForm">
  <label>
    <span>First Name</span>
    <input type="text" name="firstName" value="">
  </label>
  <label>
    <span>Last Name</span>
    <input type="text" name="lastName" value="">
  </label>
  <label>
    <span>Email</span>
    <input type="text" name="email" value="">
  </label>
  <label>
    <span>Phone Number</span>
    <input type="text" name="phone" value="">
  </label>
  <button type="button" id="addRow">Add Row</button>
</form>

2 commentaires

Merci beaucoup! Cependant, je n'ai pas obtenu cette partie, laissez regData = localStorage.hasOwnProperty ('regData')? JSON.parse (localStorage.getItem ('regData')): []; Qu'est-ce que ça veut dire . Pourquoi n'avons-nous pas créé de tableau mais l'avons-nous fait de cette façon?

C'est un opérateur ternaire . Cela signifie: s'il existe une propriété regData dans localStorage, stockez-la dans la variable regData; sinon, définissez la variable regData sur un tableau vide. C'est équivalent à ceci: if (le stockage local existe) {set variable to local storage} else {set variable to empty array}