关于javascript:现代JavaScript高级教程Cookie-Session-SessionStorage-LocalStorage

详解 Cookie, Session, SessionStorage, LocalStorage

引言

在 Web 开发中，数据的存储和治理是十分重要的。Cookie、Session、SessionStorage 和 LocalStorage 是常见的 Web 存储解决方案。本文将具体介绍这些概念，比拟它们的特点和用法，并提供相干的代码示例。

1. 什么是 Cookie？

属性

Cookie 是一种在客户端存储数据的机制，它将数据以键值对的模式存储在用户的浏览器中。Cookie 具备以下属性：

• 名称和值：每个 Cookie 都有一个名称和对应的值，以键值对的模式示意。
• 域（Domain）：Cookie 的域属性指定了能够拜访 Cookie 的域名。默认状况下，Cookie 的域属性设置为创立 Cookie 的页面的域名。
• 门路（Path）：Cookie 的门路属性指定了能够拜访 Cookie 的门路。默认状况下，Cookie 的门路属性设置为创立 Cookie 的页面的门路。
• 过期工夫（Expires/Max-Age）：Cookie 的过期工夫属性指定了 Cookie 的有效期限。能够通过设置 Expires 或Max-Age属性来定义过期工夫。过期工夫能够是一个具体的日期和工夫，也能够是一个从以后工夫开始的时间段。
• 安全标志（Secure）：Cookie 的安全标志属性指定了是否只在通过 HTTPS 协定发送申请时才发送 Cookie。
• 同站点标记（SameSite）：Cookie 的同站点标记属性指定了是否限度 Cookie 只能在同一站点发送。能够设置为Strict（仅容许来自以后站点的申请携带 Cookie）或Lax（容许局部跨站点申请携带 Cookie）。

利用场景

Cookie 在 Web 开发中有多种利用场景，包含：

• 会话治理：Cookie 罕用于存储会话标识符，以便在用户拜访不同页面时放弃会话状态。
• 身份验证：Cookie 能够用于存储用户的身份验证凭证或令牌，以便在用户下次访问时主动登录。
• 个性化设置：Cookie 能够用于存储用户的个性化首选项，例如语言偏好、主题设置等。
• 追踪和剖析：Cookie 能够

用于追踪用户的行为和进行网站剖析，例如记录用户拜访的页面、点击的链接等。

以下是一个应用 JavaScript 创立和读取 Cookie 的示例：

// 设置 Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/; secure; SameSite=Strict";

// 读取 Cookie
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {const cookie = cookies[i].split("=");
  const name = cookie[0];
  const value = cookie[1];
  console.log(name + ":" + value);
}

2. 什么是 Session？

属性

Session 是一种在服务器端存储和跟踪用户会话状态的机制。Session 具备以下属性：

• 存储地位：Session 数据存储在服务器端的内存或长久化介质中，而不是存储在客户端。
• 会话 ID：每个会话都有一个惟一的会话 ID，用于标识该会话。会话 ID 通常通过 Cookie 或 URL 参数发送给客户端，并在后续申请中用于辨认会话。
• 过期工夫：Session 能够设置过期工夫，以管制会话的有效期。过期工夫能够是一个具体的日期和工夫，也能够是一个从会话创立时开始的时间段。
• 安全性：Session 的会话 ID 须要进行爱护，以避免会话劫持和其余平安问题。

利用场景

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");

// 读取 SessionStorage
const username = sessionStorage.getItem("username");
console.log(username);

4. 什么是 LocalStorage？

属性

LocalStorage 是一种在客户端存储持久性数据的机制。LocalStorage 具备以下属性：

• 存储地位：LocalStorage 数据存储在客户端的长久化介质中，与浏览器相关联。
• 持久性：LocalStorage 数据不受会话完结或浏览器敞开的影响，会始终保留在浏览器中，除非被显式删除。
• 域和协定限度：LocalStorage 数据只能在同一域和协定下拜访。

利用场景

LocalStorage 在 Web 开发中有多种利用场景，包含：

• 本地数据存储：LocalStorage 可用于在客户端存储持久性数据，如用户首选项、缓存的数据等。
• 离线利用：LocalStorage 可用于存储离线利用所需的资源，例如 HTML、CSS 和 JavaScript 文件，以实现离线拜访能力。
• 单页利用状态治理：在单页利用中，能够应用 LocalStorage 来存储和治理利用的状态，例如以后选中的标签、开展 / 收起的面板等。

以下是一个应用 JavaScript 操作 LocalStorage 的示例：

// 设置 LocalStorage
localStorage.setItem("username", "John Doe");

// 读取 LocalStorage
const username = localStorage.getItem("username");
console.log(username);

5. Cookie vs. Session vs. SessionStorage vs. LocalStorage

Cookie、Session、SessionStorage 和 LocalStorage 都是常见的 Web 存储解决方案，每种计划都有其实用的场景和特点。

• 应用 Cookie 能够在客户端存储数据，实用于存储会话标识符、用户首选项和追踪用户行为等场景。
• Session 用于在服务器端存储和治理用户的会话状态，实用于身份验证、购物车和个性化设置等场景。
• SessionStorage 用于在浏览器会话期间存储长期数据，实用于传递数据、保留表单数据和单页利用状态治理等场景。
• LocalStorage 用于在客户端存储持久性数据，实用于本地数据存储、离线利用和单页利用状态治理等场景。

依据具体的需要和场景，抉择适合的存储计划能够更好地治理和应用数据。

6. 参考资料

• MDN Web Docs – HTTP Cookies
• MDN Web Docs – Web Storage API
• MDN Web Docs – SameSite attribute
• MDN Web Docs – HttpOnly attribute
• W3Schools – JavaScript Cookies
• W3Schools – HTML Web Storage Objects