怎么用js保存登录用户并显示出来

使用JavaScript保存登录用户并显示出来的方法包括：使用浏览器的LocalStorage或SessionStorage、Cookies和服务器端会话。

LocalStorage是最常用的方法，因为它可以在浏览器关闭后仍然保存数据。以下将详细介绍如何使用LocalStorage来保存和显示登录用户的信息。

一、使用LocalStorage保存登录用户信息

1. 保存用户信息到LocalStorage

为了保存用户信息，你需要在用户登录成功后，将用户数据存储到LocalStorage中。这可以通过JavaScript的localStorage.setItem()方法实现。例如：

// 假设我们有一个用户对象
const user = {
    username: "john_doe",
    email: "john.doe@example.com"
};
// 将用户信息存储到LocalStorage
localStorage.setItem("loggedInUser", JSON.stringify(user));

2. 从LocalStorage中获取用户信息

要显示存储的用户信息，你需要从LocalStorage中获取并解析这个信息。这可以通过JavaScript的localStorage.getItem()方法实现。例如：

// 从LocalStorage中获取用户信息
const loggedInUser = JSON.parse(localStorage.getItem("loggedInUser"));
// 检查用户信息是否存在
if (loggedInUser) {
    console.log(`Logged in as ${loggedInUser.username}`);
} else {
    console.log("No user is currently logged in.");
}

二、使用SessionStorage保存登录用户信息

1. 保存用户信息到SessionStorage

与LocalStorage类似，你也可以将用户信息存储到SessionStorage中。不同的是，SessionStorage只能在当前会话中保存数据，浏览器关闭后数据会被清除。

// 将用户信息存储到SessionStorage
sessionStorage.setItem("loggedInUser", JSON.stringify(user));

2. 从SessionStorage中获取用户信息

从SessionStorage中获取用户信息的方法与LocalStorage类似：

// 从SessionStorage中获取用户信息
const loggedInUser = JSON.parse(sessionStorage.getItem("loggedInUser"));
// 检查用户信息是否存在
if (loggedInUser) {
    console.log(`Logged in as ${loggedInUser.username}`);
} else {
    console.log("No user is currently logged in.");
}

三、使用Cookies保存登录用户信息

1. 保存用户信息到Cookies

你可以使用JavaScript的document.cookie来设置和获取Cookies。例如：

// 设置Cookie
document.cookie = `loggedInUser=${JSON.stringify(user)}; path=/`;

2. 从Cookies中获取用户信息

获取Cookie稍微复杂一些，需要解析Cookie字符串：

// 获取Cookie字符串
const cookies = document.cookie.split(";");
// 查找特定的Cookie
let loggedInUser;
for (let cookie of cookies) {
    const [name, value] = cookie.split("=");
    if (name.trim() === "loggedInUser") {
        loggedInUser = JSON.parse(value);
        break;
    }
}
// 检查用户信息是否存在
if (loggedInUser) {
    console.log(`Logged in as ${loggedInUser.username}`);
} else {
    console.log("No user is currently logged in.");
}

四、使用服务器端会话保存登录用户信息

在更复杂的应用中，通常会使用服务器端会话来管理用户登录信息。这需要服务器端代码来处理会话和身份验证。以下是一个简单的流程：

服务器端验证用户登录：在用户提交登录信息后，服务器端验证用户名和密码。
创建会话：验证成功后，服务器端创建一个会话，并将用户信息存储在会话中。
发送会话ID到客户端：服务器将会话ID发送到客户端，通常通过Cookie。
客户端存储会话ID：客户端存储会话ID，并在后续请求中发送给服务器以验证用户身份。
显示用户信息：客户端从服务器获取用户信息并显示。

以下是一个简单的服务器端示例（Node.js + Express）：

const express = require("express");
const session = require("express-session");
const app = express();
// 配置会话中间件
app.use(session({
    secret: "your_secret_key",
    resave: false,
    saveUninitialized: true
}));
// 登录路由
app.post("/login", (req, res) => {
    const { username, password } = req.body;
    // 验证用户名和密码
    if (username === "john_doe" && password === "your_password") {
        // 创建会话并存储用户信息
        req.session.user = { username: "john_doe", email: "john.doe@example.com" };
        res.send("Login successful");
    } else {
        res.send("Invalid username or password");
    }
});
// 获取用户信息路由
app.get("/user", (req, res) => {
    if (req.session.user) {
        res.json(req.session.user);
    } else {
        res.status(401).send("Not logged in");
    }
});
app.listen(3000, () => {
    console.log("Server is running on port 3000");
});

五、结论

使用JavaScript保存和显示登录用户信息可以通过多种方法实现，包括LocalStorage、SessionStorage、Cookies和服务器端会话。LocalStorage是最常用的方法，因为它在浏览器关闭后仍然保存数据。而SessionStorage适合在浏览器会话期间存储数据。对于更复杂的应用，使用服务器端会话是更安全和可靠的选择。通过了解这些方法，你可以选择最适合你应用的方式来管理用户登录信息。