Save a css display value in Local Storage

user_15485964 0
Viewed 381

I have a page with some videos showing like a web course: so after the first one finishes, the second one appears and so on.
The code used is very simple, with a display none/block function.

**What I want to do is to save in localStorage when a video changes from display "none" to "block", and retrieve it on Page Load** (because I don't want to start again from video 1 every time I load or refresh the page).

Some conditions:

  • I must use a specific internal platform, very old, to load my code. Is customized by the place where I work
  • I can't use external libraries or tag too new
  • I search for the simpliest, pure solution code
  • the code down is a part of the one I used, I assure this is the only working way, I tried better ways but nothing

Here the code with 2 videos:
html

<script type="text/javascript">

    document.getElementById('Video1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        var video2 = document.getElementById("Video2");
if ( video2.style.display === "none") {
     video2.style.display = "block";
  
  } else {
 
  }
    }
</script>
 
   <video id="Video1" controls="" width="320" height="240">
  <source src="https://www.tdblog.it/wp-content/uploads/2020/07/Video_aruba_200721_04.mp4" type="video/mp4">

Your browser does not support the video tag.
</video> 

<video id="Video2" controls="" style="display:none; float:right;" width="320" height="240">
  <source src="https://www.tdblog.it/wp-content/uploads/2020/06/1160438711001_6017851885001_6017852130001.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

Thanks for the help!
Here the new code:

   

 <script type="text/javascript">
document.getElementById('Video1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        var video2 = document.getElementById("Video2");
    if ( video2.style.display === "none") {
     video2.style.display = "block";
   localStorage.setItem('video1Completed', 'true');
   } else {
 
   }
    }

    window.onload = function(){
  
           localStorage.getItem('video1Completed')=='true' {
     Video2.style.display = "block";
    } else {
     Video2.style.display = "none";
    }
        
    }
    </script>
    <video id="Video1" controls="" width="320" height="240">
    <source src="https://www.tdblog.it/wp- 
    content/uploads/2020/07/Video_aruba_200721_04.mp4" type="video/mp4">

    Your browser does not support the video tag.
    </video> 

    <video id="Video2" controls="" style="display:none; float:right;" 
    width="320" height="240">
    <source src="https://www.tdblog.it/wp- 
    content/uploads/2020/06/1160438711001_6017851885001_6017852130001.mp4" 
    type="video/mp4">

    Your browser does not support the video tag.
    </video>

local-storage css html javascript
1 Answers

You forgot the if statement plus you need to get the video2 element.

document.getElementById('Video1').addEventListener('ended', myHandler, false);

function myHandler(e) {
  var video2 = document.getElementById("Video2");
  if (video2.style.display === "none") {
    video2.style.display = "block";
    localStorage.setItem('video1Completed', 'true');
  } else {

  }
}

window.onload = function() {
    var video2 = document.getElementById("Video2");
    if (localStorage.getItem('video1Completed') == 'true') {
      video2.style.display = "block";
    } else {
      video2.style.display = "none";
    }

  }
user_21642490
Related