HTML5 数据存储与 Session 使用详解：附 Node.js 代码示例

HTML5 数据存储与 Session 使用详解

在 Web 开发中，数据存储是至关重要的环节。HTML5 提供了多种数据存储机制，例如 Cookie 和 LocalStorage，方便开发者在客户端保存数据。而 Session 则通常用于服务器端，用于维护用户会话状态。

HTML5 数据存储

• Cookie: 存储在用户浏览器中的小型文本文件，可用于存储少量数据，例如用户偏好设置。
• LocalStorage: 提供更大的存储空间，允许网站存储更复杂的数据，例如用户输入的信息。

Session 简介

Session 用于跟踪用户在网站上的活动，并在用户访问网站的不同页面时保持其登录状态。当用户首次访问网站时，服务器会创建一个唯一的 Session ID，并将其存储在用户的 Cookie 中。之后，用户每次发送请求时，都会将 Session ID 发送给服务器，服务器根据该 ID 检索相应的 Session 数据。

Node.js 中的 Session 使用示例

以下示例展示了如何在 Node.js 和 Express 框架中使用 Session 管理用户登录状态：

1. 安装 express-session 中间件

npm install express-session

2. 在 app.js 中配置 Session 中间件

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

app.use(session({
  secret: 'mysecretkey', // 用于加密 Session ID
  resave: false, // 仅在 Session 数据发生变化时才保存
  saveUninitialized: false //  仅在 Session 数据被修改时才保存
}));

3. 在登录路由中存储用户信息到 Session

router.post('/login', function(req, res) {
  const { username, password } = req.body;
  // 验证用户名和密码
  if (username === 'admin' && password === '123456') {
    // 存储用户信息到 Session 中
    req.session.user = { username: 'admin' };
    res.redirect('/dashboard');
  } else {
    res.render('login', { message: '用户名或密码错误' });
  }
});

4. 在需要验证身份的页面中检查 Session

router.get('/dashboard', function(req, res) {
  // 检查 Session 中是否存在用户信息
  if (req.session.user) {
    res.render('dashboard', { username: req.session.user.username });
  } else {
    res.redirect('/login');
  }
});

总结

本文介绍了 HTML5 数据存储机制以及 Session 的概念和使用方法。Session 是 Web 开发中常用的技术，可以有效地管理用户状态并提升用户体验。通过 Node.js 和 Express 框架，我们可以轻松地在 Web 应用中实现 Session 功能。