Question

这是我用来制作粘性或绝对导航栏的代码。它工作得很好，但我有1个问题。我希望它是永久性的，就像我选择粘性时一样，即使刷新页面也将是粘性的。我选择其他选项的那一刻会很棘手。怎么做？提前致谢！对不起，我的英语。

<div id="menu-sticky-right">
    <img style="cursor: pointer;" onclick="myFunction()" src="https://i.imgur.com/Ed3FO1w.png" width="15" height="15">&nbsp;&nbsp;&nbsp;
    <img style="cursor: pointer;" onclick="myFunction2()" src="https://i.imgur.com/MDg7ZDp.png" width="15" height="15">
    <script>
        function myFunction() {
            document.getElementById('menu-sticky').style.cssText = 'position: absolute;';
        }
    </script>
    <script>
        function myFunction2() {
            document.getElementById('menu-sticky').style.cssText = 'position: fixed;';
        }
    </script>
</div>

Answer 1

为了保持页面刷新之间的信息，可以使用window.sessionStorage（在关闭浏览器时将清除）或window.localStorage（永久保存数据）。

两者都有.setItem(name, value)和.getItem(name)，可分别用于存储信息（变量）和将其取回。例如，您可以使用它们来存储布尔变量isSticky。

请参阅Storage API文档here。

您的代码可能如下所示：

<div id="menu-sticky-right">
    <img style="cursor: pointer;" onclick="myFunction()" src="https://i.imgur.com/Ed3FO1w.png" width="15" height="15">&nbsp;&nbsp;&nbsp;
    <img style="cursor: pointer;" onclick="myFunction2()" src="https://i.imgur.com/MDg7ZDp.png" width="15" height="15">
    <script>
        function myFunction() {
            window.localStorage.setItem('isAbsolute', true);
            document.getElementById('menu-sticky').style.cssText = 'position: absolute;';
        }
        function myFunction2() {
            window.localStorage.setItem('isAbsolute', false);
            document.getElementById('menu-sticky').style.cssText = 'position: fixed;';
        }

        var isAbsolute = window.localStorage.getItem('isAbsolute');
        if (isAbsolute) {
            document.getElementById('menu-sticky').style.cssText = 'position: absolute;';
        }
        else {
            document.getElementById('menu-sticky').style.cssText = 'position: fixed;';
        }
    </script>
</div>

如何使所选功能永久化？

1 个答案: