在本地存储中保存一个 css 显示值答案

【问题标题】：Save a css display value in Local Storage在本地存储中保存一个 css 显示值
【发布时间】：2021-06-23 06:03:46
【问题描述】：

我有一个页面，其中一些视频显示为网络课程：所以在第一个视频完成后，第二个视频会出现，依此类推。
使用的代码非常简单，带有显示无/块功能。

**我想要做的是当视频从显示“无”更改为“阻止”时保存在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>

【问题讨论】：

只需添加 localStorage.setItem('video1Completed', 'true');在你的如果。 onload 检查是否 localStorage.getItem('video1Completed')=='true' 并将显示设置为无
谢谢@NicolasI 我试过但没用...我对此很陌生，所以我无法指出我写错了什么：我把 localStorage.setItem('video1Completed', '真的'）;在 if 中，然后这个： $( window ).on( "load", function() { localStorage.getItem('video1Completed')=='true' { Video2.style.display = "block"; } else { Video2 .style.display = "none"; } });
尝试通过添加新代码来更新您的帖子
来了！ @NicolasI

标签： javascript html css local-storage

【解决方案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";
    }

  }

【讨论】：