在sessionStorage中保存並顯示鍵值對

好吧，我一直在研究這個代碼，我仍然無法讓它正常工作。我的代碼有兩個問題。在sessionStorage中保存並顯示鍵值對

我試圖保存每個輸入和選擇字段的值，並在頁面刷新時再次顯示它們。
每次用戶鍵入相同的輸入字段時，都會創建一個新的key: value對。我只想要用戶輸入的相同輸入字段，以在用戶更改其值時實時更新sessionStorage。

如果它有幫助我使用JQuery和PHP。我的jQuery代碼位於下方

JQuery的

$(document).ready(function(){ 
    var max_fields = 5; 
    var x = 1; 

    if(typeof(Storage) !== 'undefined'){ 
     $('.worker').on('click', function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 

      if(x < max_fields){ 
       x++; 

       $(this).closest('li').find('div:eq(3)').append('<input type="text" name="first_name[]" class="first-name" /><input type="text" name="last_name[]" class="last-name" /><select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>'); 

       sessionStorage.setItem('Data',$(this).closest('li').find('div:eq(3)').html()); 
      } 
     }); 

     if(sessionStorage.getItem('Data')){ 
      $('.worker').closest('li').find('div:eq(3)').html(sessionStorage.getItem('Data')); 
     } 
    } 
}); 


var worker_record = []; 
$(document).ready(function(){ 
    $('.worker').closest('li').find('div:eq(3)').on('input', function(){ 
     var fname = $('.first-name').val(); 
     var lname = $('.last-name').val(); 
     var wtitle = $('.title').val(); 
     var worker_data = {first_name: fname, last_name: lname, title: wtitle}; 
     worker_record.push(worker_data); 
     for(var i=0; i<worker_record.length; i++){ 
      sessionStorage.newWorker = JSON.stringify(worker_record); 
     } 
    }); 
});

HTML

<ul> 
    <li> 
     <div class="worker-container"> 
      <label class="worker-label"><input type="text" name="first_name[]" class="first-name" /></label> 
     </div> 

     <div class="worker-container"> 
      <label class="worker-label"><input type="text" name="last_name[]" class="last-name" /></label> 
     </div> 

     <div class="worker-container-last"> 
      <label class="worker-label"> 
       <select name="title[]" class="title"> 
        <option value="Select a Title" selected="selected">Select a Title</option> 
        <option value="Boss">Boss</option> 
        <option value="Worker">Worker</option> 
        <option value="Manager">Manager</option> 
       </select> 
      </label> 
     </div> 
     <div class="add-more"></div> 
     <div><a class="worker" href="">Add Another Worker</a></div> 
    </li> 
</ul>

這裏是我的jsfiddle https://jsfiddle.net/qjp6uscu/

來源

2016-08-02 obi

鏈接問題＃2

可以使用getItem方法這樣獲取現有sessionStorage的關鍵，

var worker_record = sessionStorage.getItem('newWorker');

如果它不存在初始化一個空數組，否則解析它。

if (!worker_record) { 
    worker_record = []; 
    } else { 
    worker_record = JSON.parse(worker_record); 
    }

把你的worker_data到會話存儲，

worker_record.push(worker_data);

使用setItem方法來設置這樣的更新鍵/值，

sessionStorage.setItem('newWorker', JSON.stringify(worker_record));

來源

2016-08-02 06:07:48

哪裏正是更換，並將新碼？謝謝您的幫助。 – obi

你可以在你已經寫好邏輯的'（document）.ready（function（）{....}）塊中獲得它。 –

它仍然無法正常工作。 – obi

在sessionStorage中保存並顯示鍵值對

回答

相關問題