javascript - 如何在 jquery javascript 中从 localstorage 保存和获取表单状态

Question

我想将表单状态保存在本地存储中，即我可以保存，但是

我无法保存输入输入的数据

预期输出:假设我在输入框中输入doggy，然后我想保留该doggy，并将其填充到克隆中 一个。

这是代码笔: https://codepen.io/anon/pen/mGYdKO?editors=1010

这是我尝试过的:

$(function(){
  $(document).on('click','#getstate',function(){
      var cloned = $('#wrapper-rrr').clone();
      console.log('cloned.html()',cloned.html());
      if($(this).is(':checked')){
         localStorage.setItem("form", JSON.stringify(cloned.html()));
      }else{
        var lastForm = JSON.parse(localStorage.getItem("form"));
         $('#displayAboveResult').html(lastForm);
      }
   });
})

#displayAboveResult{
  margin-top:40px;
  border:1px solid #ccc;
padding:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper-rrr">
  <div class="form">
    <input type="text" placeholder="capture typed input into localstorage">
    <input type="checkbox" id="getstate">
  </div>
  
  
  <div id="displayAboveResult">
    <p>Empty in the begining</p>
  </div>
  
</div>

请帮助我提前谢谢!

Answer 1

只需在克隆之前触摸所有输入即可更改其 DOM 状态。

$(function(){
  $(document).on('click','#getstate',function(){
     $('input:text').each(function() {
         $(this).attr('value',           $(this).val());
     });
      var cloned = $('#wrapper-rrr').clone(true);
     console.log('cloned.html()',cloned.html());
      if($(this).is(':checked')){
         localStorage.setItem("form", JSON.stringify(cloned.html()));
      }else{
        var lastForm = JSON.parse(localStorage.getItem("form"));
         $('#displayAboveResult').html(lastForm);
      }
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper-rrr">
  <div class="form">
    <input type="text" placeholder="capture typed input into localstorage" value="">
    <input type="checkbox" id="getstate" value="">
  </div>
  <div id="displayAboveResult">
    <p>Empty in the begining</p>
  </div>
  
</div>

代码笔示例: https://codepen.io/sumesh-tg/pen/wELGKO

我想这会对你有帮助。