带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage（2）

带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage（1）https://developer.aliyun.com/article/1349544?groupCode=tech_library

应用场景

Session在Web开发中有多种应用场景，包括：

• 用户身份验证：Session用于存储用户的身份验证状态，以便在用户访问需要验证的资源时进行验证。
  
• 购物车：Session用于存储用户的购物车内容，以便在用户进行结账或继续购物时保持购物车状态。
  
• 个性化设置：Session可以用于存储用户的个性化首选项，例如语言偏好、主题设置等。
  

以下是一个使用Express.js处理Session的示例：

const express = require("express");const session = require("express-session");
const app = express();
app.use(session({
  secret: "mysecret",
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true, sameSite: "strict", httpOnly: true }}));
app.get("/", (req, res) => {
  req.session.username = "John Doe";
  res.send("Session is set.");});
app.get("/profile", (req, res) => {
  const username = req.session.username;
  res.send("Welcome, " + username);});
app.listen(3000, () => {
  console.log("Server is running on port 3000");});

3. 什么是SessionStorage？

属性

SessionStorage是一种在客户端存储临时数据的机制。SessionStorage具有以下属性：

• 存储位置：SessionStorage数据存储在客户端的内存中，与当前会话关联。
  
• 会话范围：SessionStorage数据仅在浏览器会话期间保留，当用户关闭标签页或浏览器时数据将被清除。
  
• 域和协议限制：SessionStorage数据只能在同一域和协议下访问。
  

应用场景

SessionStorage在Web开发中有多种应用场景，包括：

• 临时数据存储：SessionStorage可用于在页面之间传递临时数据，例如表单数据、临时状态等。
  
• 表单数据保存：SessionStorage可用于保存用户填写的表单数据，以便在刷新页面或返回页面时恢复数据，防止数据丢失。
  
• 单页应用状态管理：在单页应用中，可以使用SessionStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。
  

以下是一个使用JavaScript操作SessionStorage的示例：

// 设置SessionStorage
sessionStorage.setItem("username", "John Doe");
// 读取SessionStorageconst username = sessionStorage.getItem("username");
console.log(username);

带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage（3）https://developer.aliyun.com/article/1349541?groupCode=tech_library