Как сделать запоминание в куках результат открытия картинок и текста?

Всем привет! Изложу суть.

На странице имеется 2 блока, первый при заходе на сайт выдает картинки с определенным интервалом времени, (от первой до третей, не по кругу, а именно от 1 до 3 (один раз)), второй блок в это время выдает блоки с текстом также с определенным интервалом времени. Но проблема в том, что когда обновляешь страницу, выдача блоков повторяется. Помогите с помощью куков сделать запоминание браузером пользователя, результат открытие всех блоков на странице. В общем, чтобы после обновления страницы, стояла картинка под номером, и были открытыми все текстовые блоки.

Код для блока с текстом:

HTML

<div class="hide_block1">Текст 1</div>

<div class="hide_block2">Текст 2</div>

<div class="hide_block3">Текст 3</div>

<div class="hide_block4">Текст 4</div>

<div class="hide_block5">Текст 5</div>

CSS

.hide_block1 {

  overflow: hidden;

  animation: showDiv 4s forwards;

}



.hide_block2 {

  overflow: hidden;

  animation: showDiv 14s forwards;

}



.hide_block3 {

  overflow: hidden;

  animation: showDiv 25s forwards;

}





.hide_block4 {

  overflow: hidden;

  animation: showDiv 33s forwards;

}





.hide_block5 {

  overflow: hidden;

  animation: showDiv 42s forwards;

}



@keyframes showDiv {

  0%, 99% {

    height: 0px;

  }

  100% {

    height: 100%;

  }

}

Код картинок:

HTML

<div id="slider">

    <img src="" id="one">

    <img src="" id="two">

</div>

CSS

#slider{

    width: 100px;

    height: 100px;

    margin: 0px auto;

}

#slider > img{

    position: absolute;

    transition: 1s;

}

JS

const viewImages = props => {

    let i = 0, elems = [two, one], timeout; one.src = props.img[0], two.src = props.img[1];

    const changeImg = () => {

        elems.reverse();

        elems[0].style.opacity = 1, elems[1].style.opacity = 0;

        setTimeout(()=> elems[1].src = props.img, props.speed * 1000 + 900);

        timeout = setTimeout(changeImg, props.speed * 1000);

        i == props.img.length - 1 ? (i = 0, clearTimeout(timeout)) : i++;

    }; changeImg();

}

 

viewImages({

    img : [
        'https://pp.userapi.com/c849416/v849416811/13d2f8/zPAXn4wkdbs.jpg',

        'https://pp.userapi.com/c849416/v849416811/13d2f1/8i73jwgUPek.jpg',

        'https://pp.userapi.com/c849416/v849416811/13d2ea/mM6hEHXbOkY.jpg'

    ],

    speed : 2

});