Javascript 刷新后保存视频状态

我需要完成这个视频教程网站，我希望我的视频有一个彩色边框，这取决于状态，并在完成后褪色，但刷新后不会保存

我尝试使用cookies，但似乎无法实现它们。有人知道我该如何维持会话吗

    <iframe id="iframeul-lu-gogu"
        width="355" height="214"
        src="https://www.youtube.com/embed/3rzgrP7VA_Q?enablejsapi=1" 
        frameborder="0"
        allow="autoplay; encrypted-media" 
        allowfullscreen
        style="border: solid 4px #37474F"
></iframe>


<script type="text/javascript">

  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('iframeul-lu-gogu', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
    document.getElementById('iframeul-lu-gogu').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
    var sloboz;
    if (playerStatus == -1) {
      sloboz = "#37474F"; // gri ca moartea
    } else if (playerStatus == 0) {
      sloboz = "#DD2C00"; // e pe stop fufa
    } else if (playerStatus == 1) {
      sloboz = "#33691E"; // mai avem nevoie si de iarba
    } else if (playerStatus == 2) {
      sloboz = "#FFFF00"; // energizant Ber Grills
    } else if (playerStatus == 3) {
      sloboz = "#AA00FF"; // strugurel
    } else if (playerStatus == 5) {
      sloboz = "#FF6DOO"; // portocala mecanica
    }
    if (sloboz) {
      document.getElementById('iframeul-lu-gogu').style.borderColor = sloboz;
      document.getElementById('iframeul-lu-gogu').style.borderWidth = "thick";
    }

  }
    function videoEndShit(playerStatus) {

    if (playerStatus == 0) {
      document.getElementById('iframeul-lu-gogu').style.borderWidth = "thick";  
      document.getElementById('iframeul-lu-gogu').style.opacity = "0.25";
      document.getElementById('iframeul-lu-gogu').style.transform= "rotate(0deg)";
      document.getElementById('iframeul-lu-gogu').style.backgroundImage = "url('https://img.heypik.com/58pic/26/26/43/58cb9f01b4a0a.jpg?x-oss-process=image/resize,m_fixed,w_355/sharpen,100/quality,q_80')";
      } else {
      document.getElementById('iframeul-lu-gogu').style.opacity = "1";
      document.getElementById('iframeul-lu-gogu').style.borderWidth = "thick";
      } 
  }  

  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
    videoEndShit(event.data);
  }
</script>

<p class="subtitile">Views:

<!-- Statcounter code for licenta
file:///C:/Users/EpigonDM/Desktop/design-template/programming%20HTML.html
on Dreamweaver -->
<script type="text/javascript">
var sc_project=11734579; 
var sc_invisible=0; 
var sc_security="c3ac9789"; 
var sc_text=4; 
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/11734579/0/c3ac9789/0/" alt="Web
Analytics"></a></div></noscript>
<!-- End of Statcounter Code -->
<a href="http://statcounter.com/p11734579/?guest=1">View My
Stats</a>


</p>


                   </div>

var tag=document.createElement（'script'）；
tag.id='iframe demo'；
tag.src=https://www.youtube.com/iframe_api';
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'iframeul-lu-gogu'{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
document.getElementById（'iframeul-lu-gogu'）。style.borderColor='#FF6D00'；
}
函数changeBorderColor（playerStatus）{
var sloboz；
如果（playerStatus==-1）{
sloboz=“#37474F”//gri ca moartea
}else if（playerStatus==0）{
sloboz=“#DD2C00”//e pe stop fufa
}else if（playerStatus==1）{
sloboz=“#33691E”//mai avem nevoie si de iarba
}else if（playerStatus==2）{
sloboz=“#FFFF00”//energizant-Ber格栅
}否则如果（playerStatus==3）{
sloboz=“#AA00FF”//strugurel
}否则如果（playerStatus==5）{
sloboz=“#FF6DOO”//portocala mecanica
}
if（sloboz）{
document.getElementById（'iframeul-lu-gogu'）。style.borderColor=sloboz；
document.getElementById（'iframeul-lu-gogu'）.style.borderWidth=“thick”；
}
}
函数videoEndShit（playerStatus）{
如果（playerStatus==0）{
document.getElementById（'iframeul-lu-gogu'）.style.borderWidth=“thick”；
document.getElementById（'iframeul-lu-gogu'）.style.opacity=“0.25”；
document.getElementById（'iframeul-lu-gogu'）.style.transform=“旋转（0deg）”；
document.getElementById（'iframeul-lu-gogu'）。style.backgroundImage=“url（'https://img.heypik.com/58pic/26/26/43/58cb9f01b4a0a.jpg?x-oss进程=图像/调整大小，m_固定，w_355/锐化，100/质量，q_80'）；
}否则{
document.getElementById（'iframeul-lu-gogu'）.style.opacity=“1”；
document.getElementById（'iframeul-lu-gogu'）.style.borderWidth=“thick”；
} 
}  
函数onPlayerStateChange（事件）{
changeBorderColor（事件数据）；
videoEndShit（事件数据）；
}
视图：
var sc_项目=11734579；
var sc_=0；
var sc_security=“c3ac9789”；
var sc_text=4；
var scJsHost=（（“https:==document.location.protocol”）？
"https://secure." : "http://www.");
文件。填写（“”）；

。很抱歉，我无法提供任何对您更有帮助的信息，但目前的问题很难回答。请提供一个。请阅读-总结是，这不是一个理想的方式来解决志愿者，可能会适得其反获得答案。请不要将此添加到您的问题中。