时间戳

首页 > 解决方案 > 如何使会话存储更改值

javascript - 如何使会话存储更改值

问题描述

我正在制作一个网站，并且是 html 和 JavaScript 的新手。我基本上有一个视频，当你第一次打开网站时，一旦视频完成它就会转换到主页时，它会占据整个屏幕。我试图拥有它，以便您每次会话只能查看一次。我的问题是，当您切换到另一个页面并返回主页时，您将不得不再次观看视频。我正在使用会话存储顺便说一句。任何帮助表示赞赏

<body class="Video" id="Video">
    <div class="video">
        <video id="myVideo" width="500" muted autoplay>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>

    <script>

        var x = document.getElementById('myVideo');
        var i = document.getElementById('Home');
        var header = document.getElementById('header');
        var office = document.getElementById('office');
        var work = document.getElementById('work');
        var info = document.getElementById('info');

        var total = 1;
        var count;
        console.log(total, count);
        if (total !== count) {
            sessionStorage.setItem('isNewSession', 'true');
            console.log(sessionStorage.getItem("isNewSession"))
            
            count = 1;
            console.log(total, count);
        }
        if (sessionStorage.getItem("isNewSession") == 'true') {
            sessionStorage.setItem('isNewSession', 'false');
            console.log(sessionStorage.getItem("isNewSession"))



            i.style.overflow = "hidden";
            header.style.visibility = "visiblie";
            office.style.visibility = "hidden";
            work.style.visibility = "hidden";
            info.style.visibility = "hidden";
            footer.style.visibility = "hidden";


            document.getElementById('myVideo').addEventListener('ended', function (e) {

                x.style.visibility = "hidden";
                i.style.visibility = "visible";



                if (i.style.visibility === "visible") {
                    i.style.overflow = "visible";
                    header.style.visibility = "visible";
                    office.style.visibility = "visible";
                    work.style.visibility = "visible";
                    info.style.visibility = "visible";
                    footer.style.visibility = "visible";
                } else {
                    i.style.visibility = "hidden";
                    header.style.visibility = "visible";
                    office.style.visibility = "hidden";
                    work.style.visibility = "hidden";
                    info.style.visibility = "hidden";
                    footer.style.visibility = "hidden";
                }

            })
        }
        else {
            x.style.visibility = "hidden";
        }
    </script>

</body>

标签： javascripthtmlsession-storage

解决方案

这些行：

    var total = 1;
    var count;
    console.log(total, count);
    if (total !== count) {
        sessionStorage.setItem('isNewSession', 'true');
        console.log(sessionStorage.getItem("isNewSession"))
        
        count = 1;
        console.log(total, count);
    }

从一开始就一直运行total !== count。由于它总是运行，它变为isNewSession，'true'这使得下一个代码块也运行。我不确定它打算做什么。如果total并且count不做任何其他事情，您可能应该删除整个部分。

删除后，您可以更改它：

    if (sessionStorage.getItem("isNewSession") == 'true') {

至

    if (sessionStorage.getItem("isNewSession") !== 'false') {

在这种情况下，如果sessionStorage未设置，或者值不是'false'.

推荐阅读