当前位置：首页 > JavaScript

js实现session

2026-04-06 17:37:10JavaScript

使用 `sessionStorage` 实现会话存储

sessionStorage 是 HTML5 提供的 Web Storage API 之一，用于在当前浏览器会话期间存储数据，关闭标签页或浏览器后数据会被清除。

存储数据

sessionStorage.setItem('key', 'value');

读取数据

const value = sessionStorage.getItem('key');
console.log(value); // 输出 'value'

删除数据

sessionStorage.removeItem('key');

清空所有数据

sessionStorage.clear();

使用 `localStorage` 实现持久化存储（可选）

如果需要在浏览器关闭后仍然保留数据，可以使用 localStorage，其 API 与 sessionStorage 相同，但数据不会随会话结束而清除。

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

使用 `express-session`（Node.js 后端）

在 Node.js 环境中，可以使用 express-session 中间件管理会话数据。

js实现session

安装依赖

npm install express express-session

配置会话

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
  secret: 'your-secret-key', // 用于签名会话 ID 的密钥
  resave: false,             // 强制重新保存会话（即使未修改）
  saveUninitialized: true,   // 强制保存未初始化的会话
  cookie: { secure: false }  // 设置 Cookie 选项（HTTPS 下应设为 true）
}));

存储会话数据

app.get('/set-session', (req, res) => {
  req.session.username = 'JohnDoe';
  res.send('Session data set');
});

读取会话数据

js实现session

app.get('/get-session', (req, res) => {
  const username = req.session.username;
  res.send(`Session data: ${username}`);
});

销毁会话

app.get('/destroy-session', (req, res) => {
  req.session.destroy((err) => {
    if (err) throw err;
    res.send('Session destroyed');
  });
});

使用 `cookie` 存储会话数据（前端）

如果需要在不同标签页或浏览器关闭后仍然保留会话数据，可以结合 Cookie 使用。

设置 Cookie

document.cookie = 'username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';

读取 Cookie

const cookies = document.cookie.split(';');
const usernameCookie = cookies.find(c => c.trim().startsWith('username='));
const username = usernameCookie ? usernameCookie.split('=')[1] : null;
console.log(username); // 输出 'JohnDoe'

删除 Cookie

document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

注意事项

sessionStorage 仅在同一标签页有效，新开标签页或窗口不会共享数据。
localStorage 和 Cookie 可以跨标签页共享，但需注意安全性问题（如 XSS 攻击）。
后端会话（如 express-session）通常依赖 Cookie 存储会话 ID，确保设置 secure 和 httpOnly 选项以提高安全性。