前端本地存储 cookie localStorage sessionStorage

1、cookie

概念：

Cookie是一种在客户端存储数据的机制，它将数据以键值对的形式存储在用户的浏览器中。

    通俗来说，**客户端与服务端的交互存储的机制。**Cookie 是不安全的，原因是它本身没有采用任何加密机制。通过 HTTPS 来传输 Cookie 数据是安全的，它与 Cookie 本身无关，与 HTTPS 协议相关。

作用：

 标记一般来自服务端。

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可以

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

// 设置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用于存储用户的身份验证状态，以便在用户访问需要验证的资源时进行验证。

** 购物车**：Session用于存储用户的购物车内容，以便在用户进行结账或继续购物时保持购物车状态。

** 个性化设置**：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、LocalStorage

概念：

LocalStorage是一种在客户端存储持久性数据的机制。

LocalStorage的属性：

• 存储位置：LocalStorage数据存储在客户端的持久化介质中，与浏览器相关联。
• 持久性：LocalStorage数据不受会话结束或浏览器关闭的影响，会一直保留在浏览器中，除非被显式删除。
• 域和协议限制：LocalStorage数据只能在同一域和协议下访问。

应用场景

** 本地数据存储**：LocalStorage可用于在客户端存储持久性数据，如用户首选项、缓存的数据等。

** 离线应用**：LocalStorage可用于存储离线应用所需的资源，例如HTML、CSS和JavaScript文件，以实现离线访问能力。

** 单页应用状态管理**：在单页应用中，可以使用LocalStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。

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

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

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

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

根据具体的需求和场景，选择合适的存储方案可以更好地管理和使用数据。