如何给网站添加cookie功能？

我想要身体健康

2245人浏览 · 2023-04-21 11:32:13

我想要身体健康 · 2023-04-21 11:32:13 发布

给个人网站添加 Cookie 功能通常需要对前端和后端代码进行一定的修改。以下是一般步骤：

了解 Cookie：Cookie 是一种存储在用户浏览器的小型文本文件，用于记录用户在网站上的行为和偏好。通过使用 Cookie，网站可以实现自动登录、保存用户设置等功能。
选择后端语言：根据你的个人网站使用的后端语言（如 PHP、Node.js、Python 等），你需要了解如何在该语言中创建、读取和删除 Cookie。这里以 Node.js 为例，可以使用 Express.js 框架轻松实现 Cookie 的操作。
安装 Express 和 cookie-parser：首先，需要在 Node.js 项目中安装 Express 和 cookie-parser。在命令行中执行以下命令：
```
npm install express cookie-parser
```
设置 Express 和 cookie-parser：在你的 Node.js 项目中，引入并设置 Express 和 cookie-parser。例如，在 app.js 文件中添加以下代码：
```
const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());
```

创建、读取和删除 Cookie：使用 Express 和 cookie-parser，你可以轻松地在路由处理函数中创建、读取和删除 Cookie。例如：

// 创建 Cookie
app.get('/set-cookie', (req, res) => {
  res.cookie('exampleCookie', 'exampleValue', { maxAge: 86400000, httpOnly: true });
  res.send('Cookie has been set.');
});

// 读取 Cookie
app.get('/get-cookie', (req, res) => {
  const exampleCookie = req.cookies.exampleCookie;
  res.send(`Cookie value: ${exampleCookie}`);
});

// 删除 Cookie
app.get('/delete-cookie', (req, res) => {
  res.clearCookie('exampleCookie');
  res.send('Cookie has been deleted.');
});

前端 JavaScript 与 Cookie 交互：在前端，你可以使用 JavaScript 来创建、读取和删除 Cookie。这里是一个简单的示例：

// 创建 Cookie
function setCookie(name, value, days) {
  let expires = '';
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = `; expires=${date.toUTCString()}`;
  }
  document.cookie = `${name}=${value || ''}${expires}; path=/`;
}

// 读取 Cookie
function getCookie(name) {
  const nameEQ = `${name}=`;
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

// 删除 Cookie
function deleteCookie(name) {  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;}

getcookies解读

这段代码定义了一个名为 getCookie() 的 JavaScript 函数，它接受一个参数 name，用于指定要读取的 Cookie 的名称。函数的目的是从 document.cookie 中提取具有指定名称的 Cookie 的值。以下是对这段代码的逐行解释：

const nameEQ = ${name}=;：创建一个字符串，将传入的 Cookie 名称后面加上等号。这将用于在 document.cookie 字符串中搜索具有指定名称的 Cookie。
const ca = document.cookie.split(';');：使用 split() 函数将 document.cookie 字符串分割为一个数组，每个元素都是一个键值对形式的 Cookie（如 “key=value”）。分隔符是分号。
for (let i = 0; i < ca.length; i++) { ... }：遍历分割后的 Cookie 数组，以查找具有指定名称的 Cookie。
let c = ca[i];：在循环中，将当前迭代的 Cookie 键值对赋值给变量 c。
while (c.charAt(0) == ' ') c = c.substring(1, c.length);：这是一个去除当前 Cookie 键值对前面可能存在的空格的循环。如果 c 的第一个字符是空格，将 c 的值截取为第二个字符开始到结尾的子字符串。这个过程会一直重复，直到 c 的第一个字符不再是空格。
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);：检查去除空格后的 c 是否以 nameEQ 开头。如果是，表示找到了具有指定名称的 Cookie。此时，使用 substring() 函数提取等号后面的部分（即 Cookie 的值），并将其返回。
return null;：如果遍历完所有的 Cookie 都没有找到具有指定名称的 Cookie，函数返回 null。