Изменить фон страницы. LocalStorage

Как убедиться, что при изменении цвета фона с той же вкладки цвет фона будет изменен в другом? Теперь цвет фона изменяется, когда страница перезагружается. Я хочу сделать это, когда копаю две идентичные вкладки, и обновление одного из них изменило бы фон и другое.Изменить фон страницы. LocalStorage

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Untitled</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.remove('bg-' + event.oldValue); 
      body.classList.add('bg-' + (currentStyle + 1)); 
      console.log(event.key); 
     }); 
    </script> 
</body> 
</html>

источник

2015-05-25 Aleksandr

Это код, который вы ищете:

<script type="text/javascript"> 
    var body = document.body; 

    window.addEventListener('load', function() { 
     var currentStyle = localStorage.getItem('currentStyle'), 
      newStyle=1; 
     if (currentStyle !== null) { 
      newStyle = currentStyle % 3 + 1; 
     } 

     body.classList.add('bg-' + newStyle); 
     localStorage.setItem('currentStyle', newStyle); 
    }); 

    window.addEventListener('storage', function (event) { 
     var currentStyle = localStorage.getItem('currentStyle'); 
     body.classList.remove('bg-' + event.oldValue); 
     body.classList.add('bg-' + currentStyle); 
    }); 
</script>

источник

2015-05-25 12:46:40 kizisoft

Да! Спасибо, очень! – Aleksandr

Изменить фон страницы. LocalStorage

ответ

Смежные вопросы