Показать сообщение отдельно
  #1 (permalink)  
Старый 25.05.2015, 00:45
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 573

localStorage и событие "storage"
Возможно ли сделать так, чтобы при изменении цвета фона у <body> в одной вкладке, цвет фона менялся бы и в другой? Цвет фона меняется при обновлении страницы.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>localStorage</title>
	<style>
		html, body {
			height: 100%;
		}

		body {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bg-1 {
			background: chocolate;
		}

		.bg-2 {
			background: aqua;
		}

		.bg-3 {
			background: grey;
		}

		h1 {
			color: white;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<h1>Change the background color of the page when you reload.</h1>

	<script>
		var body = document.body,
			currentStyle = +localStorage.currentStyle || 0;

		window.addEventListener('load', function() {
			body.classList.add('bg-' + (currentStyle + 1));
			localStorage.currentStyle = ++currentStyle % 3;
		});

		window.addEventListener('storage', function( event ) {
			// body.classList.add('bg-' + +event.newValue);
			console.log(event.key);
		});
	</script>
</body>
</html>
Ответить с цитированием