How to keep active class after page reload?

Question

HTTP Cookies

Hello!
Can anyone help me add "localStorage" to the script so that the data does not disappear after the page is refreshed, I can't implement it...

<?
$iblockid = $arItem['IBLOCK_ID'];
$id=$arItem['ID'];
  if(isset($_SESSION["CATALOG_COMPARE_LIST"][$iblockid]["ITEMS"][$id]))
    {
    $checked='checked';
  }else{
    $checked='';
  }
?>

<input <?= $checked; ?> type="checkbox" id="compareid_<?= $arItem['ID']; ?>" class="inputcompare" onchange="compare_tov(<?= $arItem['ID']; ?>);">
  <label for="compareid_<?= $arItem['ID']; ?>">
    <span class="comparTov" id="clickCompare_<?= $arItem['ID']; ?>">
      <img src="image1.png" class="img-compare_<?= $arItem['ID']; ?>"  />
    </span>
  </label>
  
<script>
        function compare_tov(id)
            {
                var chek = document.getElementById('compareid_'+id);
                if (chek.checked)
                {
                    //Добавить
                    var AddedGoodId = id;
                    $.get("/local/ajax/list_compare.php",
                        {
                            action: "ADD_TO_COMPARE_LIST", id: AddedGoodId},
                        function(data) {
                            $('#my_compare_list_count').html(data);
                            $('#clickCompare_'+id).html('<img src="image2.png" />').addClass('active');
                        }
                    );
                }
                else
                {
                    //Удалить
                    var AddedGoodId = id;
                    $.get("/local/ajax/list_compare.php",
                        {
                            action: "DELETE_FROM_COMPARE_LIST", id: AddedGoodId},
                        function(data) {
                            $('#my_compare_list_count').html(data);
                            $('#clickCompare_'+id).html('<img src="image1.png" />').removeClass('active');
                        }
                    );
                }
            }
</script>

Answer 1

Everything you want to remember on the main page and hide it. On the main page, put an iframe in it, a working page from it, remember what you need and take what you need.