处理页面加载默认值的正确方法是什么？

你好。我决定做一个干净JS的，然后出现了一个我不知道如何解决的陈腐问题：

有两个功能，一个打开，一个关闭Sidebar：

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.getElementById("mySidenav").className += ' mySidenavOpen';
    document.getElementById("opener").style.display = "none";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.getElementById("mySidenav").classList.remove("mySidenavOpen");
    document.getElementById("opener").style.display = "block";
} 

然后我发现在我打开菜单并转到另一个页面（带有模板的常规站点，而不是 SPA）之后，当然默认情况下菜单是关闭的，为此我决定使用 cookie：

通过向其添加一组cookie来更改上述菜单打开功能：

function openNav() {
    ...
    Cookies.set('mySidenav', 'open');
}

在所有这些业务之前，我检查 cookie 中是否有值：

if (Cookies.get('mySidenav')) {
    if (Cookies.get('mySidenav') === 'open') {
        openNav();
    }
}

现在，很明显，在每次加载页面时，菜单都会打开，但只有在所有内容加载完毕后才会打开JS，并且默认情况下不会打开（呈现 HTML 时）。

告诉我如何正确实施？

如果你使用LocalStorage，那么本质不会改变，因为无论如何，你都需要等到键接收到值。

我想到了一个预加载器，但事实是页面现在加载速度非常快，因为静态权重低且缺少媒体，我不想用显眼的“加载”内容破坏整个印象。

笔记

我使用js-cookie 接收 cookie。

所有文件连接js都在结束标记之前。

为了解决这个问题，我不想改变脚本的位置。