javascript - 在本地存储中保存 css 显示值

Question

我有一个页面，里面有一些视频，就像网络类(class)一样显示:所以在第一个完成后，第二个出现，依此类推。
使用的代码非常简单，带有显示none/block的功能。
**我想要做的是当视频从显示“无”变为“阻止”时保存在 localStorage 中，并在页面加载时检索它**(因为我不想每次都从视频 1 重新开始)加载或刷新页面)。
部分条件:

我必须使用一个非常旧的特定内部平台来加载我的代码。由我工作的地方定制

我不能使用外部库或标记太新

我搜索最简单、最纯粹的解决方案代码

下面的代码是我使用的代码的一部分，我保证这是唯一可行的方法，我尝试了更好的方法但没有

这是带有 2 个视频的代码:
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> 

谢谢您的帮助!
这里的新代码:

   

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

Answer 1

您忘记了 if 语句加上您需要获取 video2 元素。

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

  }