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

Question

[ole92]

Доброго времени суток. Помоги пожалуйста советом.

Задача следующая:
Есть блок с классом item. Через определенные промежутки времени к этому классу добавляются(меняются) дополнительные классы item01, item02, item03. Так же нужно что бы дополнительные классы сохранялись после перезагрузки страницы.

Вот что получилось:
Классы меняются если убрать строчку var i = localStorage.getItem('logoKey'). Но вот как только я хочу сохранить значение переменной i выдает ошибку: Cannot set property 'className' of null

var arrItems = ["item item01", "item item02", "item item03"], i = 0;

setInterval(function() {
document.querySelector(".item").className = arrItems[++i == arrItems.length ? 0 : i];
var logoSave = localStorage.setItem('logoKey', i);
console.log(localStorage.getItem('logoKey'));
var i = localStorage.getItem('logoKey');
}, 3000);

Answer 1

[Павел Корнилов]

https://codepen.io/anon/pen/JZGavb

<style>
	.logo, .logo2 {width: 100px; height: 100px;}
	.logo {background: green;}
	.logo2 {background: blue;}
</style>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>


<script>
	setInterval(function() {
		var fl = document.querySelector('.logo'),
		fn = fl ? 'logo' : 'logo2';
		cn = fl ? 'logo2' : 'logo';
		console.log(fl, fn, cn);
		document.querySelectorAll('.'+fn).forEach(function(i) {
		i.className = cn;
		console.log(i.className);
		});
	}, 5000);

</script>

Ну, а сохранять можно в кукисах.

Comments

[ole92]

В этом вся и проблема. Переключение я сделал, а вот с сохранением не получается.

[ole92]

Классы меняются если убрать строчку var i = localStorage.getItem('logoKey'). Но вот как только я хочу сохранить значение переменной i выдает ошибку: Cannot set property 'className' of null

var arrItems = ["item item01", "item item02", "item item03"], i = 0;

setInterval(function() {
document.querySelector(".item").className = arrItems[++i == arrItems.length ? 0 : i];
var logoSave = localStorage.setItem('logoKey', i);
console.log(localStorage.getItem('logoKey'));
var i = localStorage.getItem('logoKey');
}, 3000);

[Павел Корнилов]

<style>
	.logo, .logo2 {width: 100px; height: 100px; display:inline-block;}
	.logo {background: green;}
	.logo2 {background: blue;}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookiesjs/1.4.2/cookies.min.js"></script>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>


<script>
	if(cookies('cn')) document.querySelectorAll('.logo').forEach(function(i) {
		i.className = cookies('cn');
		console.log(i.className);
	});
	setInterval(function() {
		var fl = !!document.querySelector('.logo'),
		fn = fl ? 'logo' : 'logo2';
		cn = fl ? 'logo2' : 'logo';
		console.log(fl, fn, cn);
		document.querySelectorAll('.'+fn).forEach(function(i) {
		i.className = cn;
		console.log(i.className);
		});
		cookies({ cn: cn });
	}, 3000);

</script>

[Павел Корнилов]

https://codepen.io/anon/pen/JZGavb

[Павел Корнилов]

Подробнее про библиотеку cookies

[ole92]

KorniloFF, спасибо, помогло!

Answer 2

[VoidVolker]

Куки, localstorage.

Comments

[VoidVolker]

localStorage.test = 'test'
"test"

Ctrl+R:

localStorage.test
> "test"

[ole92]

не понял)

[VoidVolker]

Сохранил значение в localStorage, перезагрузил страницу и получил значение из localStorage.