这是我的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" placeholder="账号" id="AX">
<input type="password" placeholder="密码" id="BX">
<input type="button" value="登录" id="CX">
<script>
if (!localStorage.权限) {
localStorage.权限 = "游客";
}
document.getElementById("CX").onclick = function () {
$.ajax({
url: "登录.php",
data: {a: document.getElementById("AX").value, b: document.getElementById("BX").value},
type: "POST",
success: function (x) {
if (x === "账号密码正确") {
localStorage.权限 = "用户";
location.reload();
} else {
alert("账号或密码错误")
}
}
})
}
if (localStorage.权限 === "用户") {
let a = document.createElement("div");
a.style.width = "100px";
a.style.height = "100px";
a.style.backgroundColor = "rgb(195,0,0)";
document.body.appendChild(a);
}
</script>
</body>
</html>
这个代码能够让页面根据权限显示内容：如果已登录，那么会显示一个红色方块。（红色方块只是一个象征。实际上要显示一大堆复杂的东西）
不过这个代码有一个安全问题：一旦一个游客按下F12，开启控制台，然后输入【localStorage.权限 = "用户"】，那么他就也能够看到红色方块。
我想过不使用localStorage，而是直接把创建红色方块的代码写在success里。不过这又导致另一个问题：一旦用户刷新页面，那么红色方块就没有了，而是需要重新登录。
综上：我希望能够同时实现两个目的：1.用户刷新页面后不需要重新登录。2.游客无法通过控制台来绕开登录系统。
问：能否同时实现这两个目的？如果能，那么要如何实现？
