隐藏我的管理员登录信息 HTML

我对HTML很陌生，就像1周新一样。我正在制作一个网上商店，我希望能够登录到"管理面板"，以便我更轻松地管理我的产品。添加新的、删除的、重命名的等。我的问题是，我将登录信息存储在 html 代码中，并使用 if 语句来检查有效性。

当我测试代码时，我很好奇，想检查元素。不出所料，有我的全部登录信息，任何人都可以访问它。

我需要以某种方式隐藏它，或者对除我以外的用户隐藏登录字段。但我不知道如何处理这个问题。我想到了一些解决方案，例如在商店页面上有一个隐藏部分，如果我单击它一定次数，那么它将显示字段。但我认为我正在使它复杂化。

任何想法都非常感谢。谢谢。下面是我的登录功能。

function login()
    {
        var username = "test username";
        var password = "testpassword";
        if(document.getElementById("username field").value == username && document.getElementById("password field").value == password)
        {
            var btn = document.createElement("BUTTON");
            document.body.appendChild(btn);
            <!-- hide the user name field after login -->
            document.getElementById("username field").hidden = true;
            <!-- hide the password field after login -->
            document.getElementById("password field").hidden = true;
            <!-- hide the login button after login -->
            document.getElementById("login btn").hidden = true;
            <!-- show a message indicating login was successfull -->
            window.alert("Login successfull! Welcome back admin!")
        }
        else
        {
            window.alert("Sorry, you are not authorized to view this page.");
        }
    }

这是检查元素的屏幕截图。我不想要像数据库这样太疯狂的东西，因为我是唯一的用户，只是一种能够在不暴露自己的情况下访问管理面板的方法。再次感谢。

检查元素屏幕截图

编辑：

我没有使用自己的服务器，而是使用 Wix.com 来制作初始网站，然后使用HTML小部件创建网上商店。我不认为他们允许人们与他们的服务器进行任何通信。