Using local storage or session storage keep collapse item-1 class show/not show

I have issue with keeping my callapse item after refresh open or closed. I using bootstrap 5. To see accordion item see, need add show in the class

<div role="tabpanel" data-bs-parent="#accordion-1" class="accordion-collapse collapse show item-1" id="1">

My html code:

<div id="row" class="row gaps">
    <div id="col-3" class="col-lg-3">
        <div role="tablist" class="accordion" id="accordion-1">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">1th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-1" class="accordion-collapse collapse show item-1" id="1">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text</span></div>
                </div>
            </div>
        </div>
        <div role="tablist" class="accordion" id="accordion-4">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-4 .item-1" aria-expanded="true" aria-controls="accordion-4 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">  2th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-4" class="accordion-collapse collapse show item-1 show" id="2">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 2</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="col-3" class="col-lg-3">
        <div role="tablist" class="accordion" id="accordion-2">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-2 .item-1" aria-expanded="true" aria-controls="accordion-2 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">3 th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-2" class="accordion-collapse collapse show item-1" id="3">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 3</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tablist" class="accordion" id="accordion-3">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-3 .item-1" aria-expanded="true" aria-controls="accordion-3 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;"> 4th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-3" class="accordion-collapse collapse show item-1" id="4">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 4</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Then I press on 4th button for example i can hide it. Visually looks like this.

So I want too keep it after refreshing the page.

I try to

<script>
    // Open/close the collapse panels based on history
    var storage  = $.localStorage;

    $('.collapse').on('hidden.bs.collapse', function () {
        storage.remove('open_' + this.id);
    });

    $('.collapse').on('shown.bs.collapse', function () {
        storage.set('open_' + this.id, true);
    });

    $('.collapse').each(function () {
        // Default close unless saved as open
        if (storage.get('open_' + this.id) == true) {
            $(this).collapse('show');
        }
    });
</script> 

But what not working for me.

Please, can you give some tips how to solve my problem?