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

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

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

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

<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>

.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%;
  }
}

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

<div id="slider">
    <img src="" id="one">
    <img src="" id="two">
</div>

#slider{
    width: 100px;
    height: 100px;
    margin: 0px auto;
}
#slider > img{
    position: absolute;
    transition: 1s;
}

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[i], 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
});

Вы можете использовать sessionStorage, и запоминать, когда впервые зашёл пользователь...

<style>
	.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%;
		}
	}

</style>

<style id="customStyleSheet"></style>

<style>
	#slider {
		width: 100px;
		height: 100px;
		margin: 0px auto;
	}

	#slider > img {
		position: absolute;
		transition: 1s;
		background-color: black;
	}

</style>

<section id="slider">
	<img id="one">
	<img id="two">
</section>

<section>
	<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>
</section>

<script>
	var startDate;

	if("startDate" in sessionStorage) {
		startDate = Number(sessionStorage.startDate);
	} else {
		startDate = Date.now();
		sessionStorage.startDate = startDate.toString();
	}

	customStyleSheet.textContent = `
		[class*=hide_block] {
			animation-delay: -${Date.now() - startDate}ms;
		}
	`;

	function viewImages({ img, speed }) {
		var i = Math.floor((Date.now() - startDate) / 1000);

		(function changeImg() {
			one.src = img[clamp(i % 2 === 0 ? i     : i - 1)];
			two.src = img[clamp(i % 2 === 0 ? i - 1 : i    )];
			two.style.opacity = i % 2;

			i++;
			if(img.length > i) setTimeout(changeImg, 1000 * speed);
		})();

		function clamp(x) {
			return x < 0 ? 0 : x >= img.length ? img.length - 1 : x;
		}
	}

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

</script>

Malleys, Спасибо то что надо, только sessionStorage поменял на localStorage.