如何使用 JavaScript/jQuery 将多个键值对保存到一个 cookie 中？

Question

I have a form with multiple checkboxes in it and when I click them, I want to add/remove the key-value pairs (name of the input + true/false) in one single cookie.

When I click on the checkboxes only the first pair gets shown in console.log.

This is what I ended up with so far:

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();
    });
});

Answer 1

Your cookie is being overrided and it might only store the first checkbox info. Also to set the prop value, you have to pass it as a second parameter.

This should update the cookie when clicked and also be able to set the values from the 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);
    });
});

Although I would recomend you to use a URLSearchParams object to encode and decode the parameters, since you are relying on the fact that "=" is not inside the JSON string.