Как сохранить несколько пар «ключ-значение» для одного повара ie с помощью JavaScript / jQuery?

Question

У меня есть форма с несколькими флажками, и когда я нажимаю на них, я хочу добавить / удалить пары ключ-значение (имя ввода + true / false) за один раз ie.

Когда я нажимаю на чекбоксы, в console.log отображается только первая пара.

На этом я остановился:

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

Ваш повар ie переопределяется, и в нем может храниться только первая информация о флажке. Кроме того, чтобы установить значение проп, вы должны передать его в качестве второго параметра.

Это должно обновить готового ie при нажатии, а также иметь возможность устанавливать значения из повара ie. * 1003. *

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

Хотя я бы порекомендовал вам использовать объект URLSearchParams для кодирования и декодирования параметров, поскольку вы полагаетесь на тот факт, что "=" не находится внутри строки JSON.