Флажок Tampermonkey перестает работать после перезагрузки страницы

Я использую этот код Tampermonkey для создания флажков, которые, если они отмечены, будут периодически нажимать на некоторые кнопки, а также обновлять страницу.
Этот код работает правильно, проблема в том, что после обновления страницы он снимает флажки и останавливается.

Мне удалось сделать так, чтобы флажки оставались отмеченными последней частью кода, проблема в том, что после обновления страницы она не продолжает функции даже с установленным флажком, и из того, что я наблюдал с тестами, я должен снять флажок и проверьте еще раз, чтобы работать.

Я считаю, что проблема в начале кода, но я не мог это исправить после поиска везде. Из того, что я видел, он отвечает только в том случае, если он нажат на флажок, а не в случае автоматической проверки.

function addDomElements () {
    var newNodes = $( `
      <div class = "mySpamCntrols foundation-radius fightContainer foundation-base-font">
        <input type = "checkbox" class = "smallerBox" id = "EsquerdaHitBox" data-trgtSelctr = "#fightButtonBerserk1">
        <label class = "checkboxlabel" for = "EsquerdaHitBox">Hit Esquerda</label>
        <input type = "checkbox" class = "smallerBox" id = "MeioHitBox" data-trgtSelctr = "#fightButtonBerserk1">
        <label class = "checkboxlabel" for = "MeioHitBox">Hit Meio</label>
        <input type = "checkbox" class = "smallerBox" id = "DireitaHitkBox" data-trgtSelctr = "#fightButtonBerserk2">
        <label class = "checkboxlabel" for = "DireitaHitkBox">Hit Direita</label>
      </div>
    ` );
    //-- Best to add a <style> node, but spam inline styles for now...
    newNodes.find ("input").attr ("style", "margin:1px !important;line-height:10px !important;");
    newNodes.find ("label").attr ("style", "margin-right: 20px;");

    newNodes.insertAfter($('.foundation-radius.fightContainer.foundation-base-font')[1] );

    //-- Activate checkboxes
    $(".mySpamCntrols").on ("change", "input[data-trgtSelctr]", processMyCheckBoxes);
}
addDomElements ();

function processMyCheckBoxes (zEvent) {
    var chkBox = zEvent.target;
    //-- If box is now checked, fire off an immediate click and start the timers
    if (chkBox.checked) {
        clickButtonByjQuerySelector (chkBox.dataset.trgtselctr);
        //chkBox.spamClckTmr   = setInterval (clickButtonByjQuerySelector, 30000, chkBox.dataset.trgtselctr);
        chkBox.spamClckTmr   = setInterval (clickButtonByjQuerySelector, 2222, chkBox.dataset.trgtselctr);
        chkBox.pageReloadTmr = setTimeout  (location.reload.bind (window.location), 300000);
    }
    //-- Else, if box is now not checked, cancel the timers
    else {
        clearInterval (chkBox.spamClckTmr);
        clearTimeout  (chkBox.pageReloadTmr);
    }
}

function clickButtonByjQuerySelector (jQuerySelector) {
    var targetNode = $(jQuerySelector)[0];
    if (targetNode) {
        console.info ("Clicking node: ", jQuerySelector);
        //-- Warning this my not always suffice.  See https://stackoverflow.com/q/15048223
        targetNode.click ();
    }
    else {
        console.warn (`Node [${jQuerySelector}] not found!`);
    }
}

//Save Checkbox
$(function(){
    $('input:checkbox').each(function() {
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() {
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

Как заставить таймеры выбранных флажков перезапускаться после перезагрузки страницы?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы были близки, но недостаточно установить свойство checked. Вы также должны синхронизировать обработчики событий.

Простой способ сделать это — просто установить флажки в коде.

Кроме того, нет необходимости/использования этой оболочки $(function(){.

Этот код работает:

//-- Restore and Save Checkboxes from sessionStorage:
$('input:checkbox').each (function () {
    var $el     = $(this);
    var elId    = $el.prop ('id');
    if (sessionStorage[elId] === 'true') {
        document.getElementById (elId).click ();
    }
} );

$('input:checkbox').on ('change', function () {
    var $el = $(this);
    sessionStorage[$el.prop ('id')] = $el.is (':checked');
} );

Другие вопросы по теме