如何在页面之间保持按钮状态

Question

在我的项目中，我将普通的 HTML 用于前端，将 Django 用于后端。我有一个 登录系统。

---

对此我有两个问题：

1. 当用户登录时，如何在HTML中检测到它并更改“登录”按钮以显示“注销”。

2. 如何在整个页面上保持此更改。因此，当我登录后导航到另一个页面时，它会一直显示注销按钮。

---

不建议我做出反应。我在可以改变的地方走了很长一段路 我在这个项目中的技术栈。

Answer 1

您可以使用localStorage另存为变量，例如isLoggedIn，该变量将在不同的路线和刷新时持续存在。要保存的示例

window.localStorage.set("isLoggedIn", "true");

要检查他们是否已登录

const isLoggedIn = window.localStorage.get("isLoggedIn");

Answer 2

您可以使用会话存储来仅存储当前会话的页面登录状态。

sessionStorage.setItem('isLoggedIn', true);

在显示按钮时获取登录状态：

var isLoggedIn = sessionStorage.getItem('isLoggedIn');

if(isLoggedIn) {
   //code for logged-in users
}

---

有关Session Storage的要点：

• 只要打开浏览器，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。
• 在新标签页或窗口中打开页面会创建一个具有顶级浏览上下文值的新会话，这与会话cookie的工作方式不同。
• 使用相同的URL打开多个选项卡/窗口会为每个选项卡/窗口创建sessionStorage。
• 关闭标签页/窗口将结束会话并清除sessionStorage中的对象。