Wie kann der dynamisch hinzugefügte Checkbox-Wert in localStorage gespeichert werden?

Question

Ich möchte meinen Checkbox-Wert dynamisch speichern. Wenn ich einen bestimmten Haken ankreuze, sind alle Kontrollkästchen aktiviert. Verwendetes Ziel, funktioniert aber nicht. Irgendwelche Ideen? JSFIDDLE

var data = localStorage.getItem("checkbox"); 
 
    if (data) { 
 
     $("input[name='checkbox-name']").attr("checked", "checked"); 
 
    } 
 
    
 
    $(document).on('change', "input[name='checkbox-name']", function (e) { 
 
    var target = $(e.target); 
 
    if (target.is(":checked")) { 
 
     localStorage.setItem("checkbox", 1); 
 
    } else { 
 
     localStorage.removeItem("checkbox"); 
 
    } 
 
});

Answer 1

Mein Vorschlag stützt sich die IDs auf die Beseitigung und Vermeidung der Kontrollkästchen Zustand separat zu speichern:

I aktualisiert Ihre Fiddle

$(document).on('click', '.delete', function() { 
    var parent = $(this).parent(); 
    parent.remove(); 

    var list = $("#list").html(); 
    localStorage.setItem("list", list); 
    return false; 
}); 

$(document).on('change', "input[name='checkbox-name']", function (e) { 
    if ($(this).prop('checked')) { 
    $(this).attr('checked', 'checked'); 
    } else { 
    $(this).removeAttr('checked'); 
    } 
    var list = $("#list").html(); 
    localStorage.setItem("list", list); 
}); 

$(function() { 
    if (localStorage.getItem('list')) { 
    $('#list').html(localStorage.getItem('list')); 
    } 

    $("#add").click(function() { 
    var userList = $('#textarea').val(); 
    $('#textarea').val(''); 
    var newitem = '<p>' + '<input type="checkbox" name="checkbox-name"/> ' + userList + '<input type="submit" value="X" class="delete"/></p>'; 
    $('#list').append(newitem); 

    var list = $("#list").html(); 
    localStorage.setItem('list', list); 
    return false; 
    }); 
}); 

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script> 

<input type="text" id="textarea" placeholder="Write here..."/> 
<button id="add">Add</button> 

<div id="list"></div> 

Answer 2

Speichern Sie Ihre Kontrollkästchen mit ihren eindeutigen IDs.

$('input:checkbox').on('change', function(e) { 
    var checkboxId = $(this).attr('id'); 
    if ($(this).is(":checked")) { 
     localStorage.setItem(checkboxId, 1); 
    } else { 
     localStorage.removeItem(checkboxId); 
    } 
}); 

Dann können Sie es abrufen:

for (var i = 0, len = localStorage.length; i < len; i++) { 
    var key = localStorage.key(i); 
    var value = localStorage[key]; 
    if (value == 1) { 
     $('#' + key).attr("checked", "checked"); 
    } 
} 

Hier ist JSFiddle https://jsfiddle.net/hc09LpfL/2/

Unabhängig davon, ob Sie Ihre Kontrollkästchen dynamisch erstellen oder manuell sie alle IDs haben.

In Ihrer Geige ist dies der Code, der die Checkboxen generiert. Ich nehme an, du verstehst diesen Teil nicht, weil du allen dieselbe ID und denselben Namen gibst.

var newitem = '<p>' + '<input type="checkbox" name="checkbox-name" id="checkbox"/> ' + userList + '<input type="submit" value="X" id="delete" class="delete"/></p>';