Я хотел сохранить состояние формы в localstorage, т. е. я могу сохранить, но

Я не могу сохранить input набранный data

ожидаемый результат: предположим, что я набираю собачка внутри поля ввода, а затем хочу сохранить эту собачку , чтобы заполнить ее внутри cloned.

вот код: https://codepen.io/anon / ручка / mGYdKO ? редакторы = 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>

Пожалуйста, помогите мне заранее спасибо !!!

0
EaBengaluru 24 Сен 2018 в 10:15

2 ответа

Лучший ответ

Просто коснитесь всех входов, прежде чем создавать клон для изменения состояния 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 / ручка / wELGKO

Я думаю, что это поможет вам.

1
Sumesh TG 26 Сен 2018 в 07:48

Попробуй это:

Мой пример codePen

Давайте дадим <input type="text" placeholder="capture typed input into localstorage"> идентификатор, скажем #toBeRetain.

$(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);
         /*Set input value after clone*/
         $('#displayAboveResult #toBeRetain').val(localStorage['savedTxt']);
      }
  });
  /*Save input change to a localStorage variable*/
   $(document).on('change','#toBeRetain',function(){
      if(localStorage['savedTxt']){
         localStorage['savedTxt']=$('#toBeRetain').val();
      }else{
         localStorage.setItem("savedTxt",$('#toBeRetain').val());
      }           
  });
  //console.log(localStorage['savedTxt']);
})

Когда пользователь вводит ввод, его свойство dom не обновляется сразу, поэтому вы не можете клонировать его значение.

Другой момент: я не уверен, нужно ли вам копировать все целиком один или несколько раз, если это последний сценарий, вам нужно выбрать родительский div с помощью $(this).parent() и изменить селектор # к ..

0
Janice Zhong 24 Сен 2018 в 09:00