javascript - 刷新页面后维护 JavaScript 附加项

Question

我希望我的附加<tr>元素在刷新页面后保持不变。

例如，当我注册用户时，数据会附加到表行中。我想添加新用户，但我希望之前添加的用户也保留在表格中。

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

我试过这个，但它只工作一次：

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

标签： javascripthtmllocal-storage

Answer 1

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