如何使会话存储更改值答案

【问题标题】：how to make session storage change value如何使会话存储更改值
【发布时间】：2020-11-24 14:01:54
【问题描述】：

我正在制作一个网站，并且是 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>

【问题讨论】：

标签： javascript html session-storage

【解决方案1】：

这些行：

    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'，它将运行。

【讨论】：

但如果我设置会话存储，它只会不断重置为 true，那么我如何才能永久更改它
您将其设置在下一行：sessionStorage.setItem('isNewSession', 'false')。如果您刷新页面，它应该保持不变。
非常感谢大家，我为什么没想到这一点