如何使用localStorage Jquery在保存时将div保存到页面

Question

您好我正在尝试保存我附加到localStorage中的父div的div。这样可以防止div在页面刷新时消失。

div在jquery中动态创建，然后附加到父div。然而，在页面refesh divs消失

任何帮助谢谢

这是我的代码：

 $(document).ready(function(){
     var counter = 2;

  $("#add-more").click(function () {
   if(counter>4){
        alert("you can only add 4 users at a time");
        return false;
   } 

   var picture = localStorage.getItem('newGetmemberForm');
   var newGetmemberForm = $(document.createElement('div'))
     .attr("id", 'show-more' + counter);
     newGetmemberForm.after().html('<div class="form-gap" id="show-more' + 
  counter + '">'
        + '<div class="form-group">'
        +   '<div class="col-xs-3">'
        +       '<input type="text" class="form-control"    
 placeholder="Firstname" name="Firstname_' + counter + '" id="Firstname_' + 
 counter + '" required="required" value=""/>'
        +    '</div>'
        +   '<div class="col-xs-3"></div>'
        +   '<div class="col-xs-3">'
        +       '<input type="text" class="form-control" 
 placeholder="Surname" name="Surname_' + counter + '" id="Surname_' + 
 counter + '" required="required" value=""/>'
        +   '</div>'
        +  '</div>'
        + '<div class="form-group">'
        +   '<div class="col-xs-9">'
        +       '<input type="email" class="form-control" placeholder="Email
     Address" name="email_' + counter + '" id="email_' + counter + '" 
    required="required" value="" />'
        +   '</div>'
        + '</div>'
        + '</div>');


newGetmemberForm.appendTo("#show-all");

counter++;

if(('localStorage' in window) && window['localStorage'] !== null){

  var showAll =$('#show-all').html();
  localStorage.setItem('saveddiv', JSON.stringify(showAll));

}

  data = JSON.parse(localStorage.getItem('saveddiv'));

   if ('saveddiv' in localStorage){
    $("#show-all").html(data);

    }

    console.log(data);

 });