我想知道如何从密钥worker
中删除特定的sessionStorage值,并将密钥limit
值减1,而不会在每次删除特定密钥工作时影响其他sessionStorage值?
这是我的Jsfiddle https://jsfiddle.net/d7e92k5d/2/
HTML
<ul>
<li>
<div class="worker-container-last">
<label class="worker-label"><input type="text" class="first-name" /></label>
</div>
<div class="worker-container-last">
<label class="worker-label"><input type="text" 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" title="" href="">Add Another Worker</a></div>
</li>
</ul>
JQuery
var worker_record = [];
$(document).ready(function(){
new_worker();
$('.worker').on('click', function(e){
e.preventDefault();
e.stopPropagation();
if(sessionStorage.getItem("limit") === null){
sessionStorage.setItem('limit', 0);
}
if(sessionStorage.getItem('limit') <= 2){
var first_name = $('.first-name').val();
var last_name = $('.last-name').val();
var title = $('.title:first').val();
var tblObj = {first_name: first_name, last_name: last_name, title: title};
worker_record.push(tblObj);
sessionStorage.worker = JSON.stringify(worker_record);
new_worker();
var count = sessionStorage.getItem('limit');
count++;
sessionStorage.setItem('limit', count);
}
});
function new_worker(){
var max_fields = 3;
var x = 0;
if(!(typeof sessionStorage.worker === 'undefined' || sessionStorage.worker.length<1)){
worker_record = JSON.parse(sessionStorage.worker);
}
$('.add-more').empty();
for(var i=0; i<worker_record.length; i++){
if(x < max_fields){
x++;
var first_name = worker_record[i].first_name;
var last_name = worker_record[i].last_name;
var title = worker_record[i].title;
var worker = '<div class="worker-container"><div class="delete-worker"><a title="" href="#">Delete</a></div><div class="update-worker"><a title="" href="#">Update</a></div><div class="worker-box"><label class="another-worker"><input type="text" name="workers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="worker-box"><label class="another-worker"><input type="text" name="workers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="worker-box-last"><label class="another-worker"><select name="workers_title[]" class="title workers-title-options"><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>';
$('.add-more').append(worker);
$('.title:eq('+$('.workers-title-options').length+')').val(title);
}
}
$('.first-name:first').val('');
$('.last-name:first').val('');
$('.title:first').val('Select a Title');
}
$('.add-more').on('click', '.delete-worker', function(e){
e.preventDefault();
e.stopPropagation();
$(this).parent('div').remove();
worker_record = JSON.parse(sessionStorage.worker);
worker_record.splice(worker_record.length -1, 1);
sessionStorage.worker = JSON.stringify(worker_record);
});
});