J'ai un formulaire avec plusieurs cases à cocher et quand je clique dessus, je veux ajouter/supprimer les paires clé-valeur (nom de l'entrée + vrai/faux) dans un seul cookie.

Lorsque je clique sur les cases à cocher, seule la première paire s'affiche dans console.log.

C'est ce que j'ai fini avec jusqu'à présent:

HTML:

<form class="form">
    <input class="input" name="expert_id_1" type="checkbox" />
    <input class="input" name="expert_id_2" type="checkbox" />
    <input class="input" name="expert_id_3" type="checkbox" />
    <input class="input" name="expert_id_4" type="checkbox" />
</form>

JS:

function setCookie() {
    var customObject = {};
    var inputName = $('.input').attr('name');
    customObject[inputName] = $('.input').prop('checked');
    var jsonString = JSON.stringify(customObject);
    document.cookie = 'cookieObject=' + jsonString;
    console.log(jsonString);
}

function getCookie() {
    var nameValueArray = document.cookie.split('=');
    var customObject = JSON.parse(nameValueArray[1]);
    $('.input').prop('checked') = customObject[inputName];
}

$('.input').each(function() {
    $(this).on('click', function() {
        if ($(this).is(':checked')) {
            $(this).attr('value', 'true');
        } else {
            $(this).attr('value', 'false');
        }
        setCookie();
    });
});
0
cptn_pat_sparrow 30 janv. 2020 à 03:53

1 réponse

Meilleure réponse

Votre cookie est remplacé et il peut ne stocker que les informations de la première case à cocher. De plus, pour définir la valeur de la prop, vous devez la passer en tant que deuxième paramètre.

Cela devrait mettre à jour le cookie lorsque vous cliquez dessus et également pouvoir définir les valeurs du cookie.

function updateCookie($input) {
    var cookieObject = getCookieObject();
    var inputName = $input.attr('name');
    cookieObject[inputName] = $input.attr('value');
    var jsonString = JSON.stringify(cookieObject);
    document.cookie = 'cookieObject=' + jsonString;
    console.log(jsonString);
}

function setFromCookie(){
    var cookieObject = getCookieObject();
    for(var inputName in cookieObject)
        if(cookieObject.hasOwnProperty(inputName))
            $(`.input[name="${inputName}"]`).prop('checked', cookieObject[inputName]);
}

function getCookieObject() {
    var nameValueArray = document.cookie.split('=');
    var cookieObject = {};
    if(nameValueArray.length >= 2)
        cookieObject = JSON.parse(nameValueArray[1]);
    return cookieObject;
}

$('.input').each(function() {
    var $this = $(this);
    $this.on('click', function() {
        $this.attr('value', String($this.is(':checked')))
        updateCookie($this);
    });
});

Bien que je vous recommande d'utiliser un objet URLSearchParams pour encoder et décoder les paramètres, puisque vous comptez sur le fait que "=" n'est pas à l'intérieur de la chaîne JSON.

0
Haibrayn González 6 avril 2020 à 17:22