【Web API】01—了解 HTTP cookies 以及如何使用 JavaScript 更有效地管理 cookies

JS教程12个月前发布 admin

1,939 0 7

在本教程中，您将了解 HTTP cookie 以及如何使用 JavaScript 有效地管理 cookie。

什么是cookie

HTTP cookie 是服务器发送到网络浏览器的一段数据。然后，Web 浏览器将 HTTP cookie 存储在用户的计算机上，并在以后的请求中将其发送回同一服务器。

HTTP cookie 也称为网络 cookie 或浏览器 cookie。它通常被称为 cookie。

例如，HTTP 响应的标头可能如下所示：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:username=admin
…

HTTP 响应设置一个名为“username”、值为“admin”的 cookie。服务器在将 cookie 发送到 Web 浏览器时对名称和值进行编码。

Web 浏览器存储此信息并通过 Cookie HTTP 标头将其发送回服务器以用于下一个请求，如下所示：

GET /index.html HTTP/1.1
Cookie: username=admin
…

Why cookies

了解 HTTP 是无状态的很重要。当您向服务器发送两个后续的 HTTP 请求时，它们之间没有链接。换句话说，服务器无法知道这两个请求是否来自同一个网络浏览器。

因此，cookie 用于判断这两个请求是否来自同一个网络浏览器。

实际上，cookies 有以下用途：

会话管理——cookie 允许您管理服务器应记住的任何信息。例如，登录、购物车等。

个性化 – cookie 允许您存储特定于用户的用户偏好、主题和设置。

跟踪——cookie 有助于记录和分析广告中的用户行为。

Cookie 详细信息

cookie 由网络浏览器存储的以下信息组成：

名称——标识 cookie 的唯一名称。 cookie 名称不区分大小写。这意味着用户名和用户名是相同的 cookie。

值——cookie 的字符串值。它必须是 URL 编码的

域 – cookie 对其有效的域。

路径 – 没有域的路径，cookie 应该发送到服务器。

例如，您可以指定 cookie 只能从 https://www.javascripttutorial.net/dom/ 访问，因此 https://www.javascripttutoiral.net/ 的页面不会发送 cookie 信息。

到期时间——指示 Web 浏览器何时应删除 cookie（或浏览器应停止向服务器发送 cookie）的时间戳。到期日期设置为 GMT 格式的日期：Wdy、DD-Mon-YYYY HH:MM:SS GMT。到期日期允许 cookie 存储在用户的网络浏览器中，即使在用户关闭网络浏览器后也是如此。

安全标志——如果指定，Web 浏览器仅通过 SSL 连接（https，而不是 http）将 cookie 发送到服务器
名称、值、域、路径、过期时间和安全标志由分号和空格分隔。例如：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:user=john
; expire=Tue, 12-December-2030 12:10:00 GMT; domain=javascripttutorial.net; path=/dom; secure
…

请注意，安全标志是唯一不是名称-值对的部分。

JavaScript 中的 Cookie

要在 JavaScript 中管理 cookie，您可以使用 document.cookie 属性。

1）获取cookie值

以下示例返回页面可用的所有 cookie 的字符串：

const str = document.cookie;

document.cookie 返回一系列由分号分隔的名称-值对，如下所示：

name1=value1;name2=value2;…

以下示例显示网页的 cookie：

“_ga=GA1.2.336374160.1600215156; dwf_sg_task_completion=False; _gid=GA1.2.33408724.1600901684”

由于所有名称和值都是 URL 编码的，因此您需要使用 decodeURIComponent() 对其进行解码。

2）设置一个cookie

要为 cookie 设置值，请按以下格式编写 cookie 文本：

name=value; expires=expirationTime; path=domainPath; domain=domainName; secure

…并将其附加到 cookie：

document.cookie = cookieText;

cookie 只需要名称和值。例如：

document.cookie = “username=admin”;

此示例创建一个名为 username 的 cookie，其值为 admin。每次向服务器发出请求时，Web 浏览器都会发送此 cookie。

由于 cookie 没有指定过期时间，因此当网络浏览器关闭时它将被删除。

cookie 文本“username=admin”没有任何需要编码的字符。

但是，在像这样设置 cookie 时始终使用 encodeURIComponent() 函数是一个好习惯：

document.cookie = `${encodeURIComponent(“username”)}=${encodeURIComponent(“admin”)}`;

3）删除cookie

要删除 cookie，您需要使用相同的名称、路径、域和安全选项再次设置 cookie。并且您需要将到期日期设置为过去的某个时间。

JavaScript Cookie 类

以下 Cookie 类设置、获取和删除 cookie：

class Cookie {
static get(name) {
const cookieName = `${encodeURIComponent(name)}=`;
const cookie = document.cookie;
let value = null;

const startIndex = cookie.indexOf(cookieName);
if (startIndex > -1) {
const endIndex = cookie.indexOf(‘;’, startIndex);
if (endIndex == -1) {
endIndex = cookie.length;
}
value = decodeURIComponent(
cookie.substring(startIndex + name.length, endIndex)
);
}
return value;
}

static set(name, value, expires, path, domain, secure) {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires instanceof Date) {
cookieText += `; expires=${expires.toGMTString()}`;
}

if (path) cookieText += `; path=${path}`;
if (domain) cookieText += `; domain=${domain}`;
if (secure) cookieText += `; secure`;

document.cookie = cookieText;
}

static remove(name, path, domain, secure) {
Cookie.set(name, ”, new Date(0), path, domain, secure);
}
}

怎么运行的。

Cookie 类具有三个静态方法：get()、set() 和 remove()。

1) get() 方法

get() 方法返回具有指定名称的 cookie 的值。为此，它执行以下步骤：

首先，在 document.cookie 属性中找到等号出现的 cookie 名称。

其次，如果 cookie 可用，它会使用 indexOf() 查找 cookie 的末尾，该末尾由该位置后的下一个分号 (;) 指定。如果分号不可用，这意味着该 cookie 是字符串中的最后一个。

第三，使用 decodeURIComponent() 函数解码 cookie 的值并返回解码后的值。

2) set() 方法

set() 方法在页面上设置一个 cookie。它接受构造 cookie 所需的参数。

set() 方法需要前两个参数：名称和值。其他参数不是强制性的。

set() 方法组成一个 cookie 文本并将其设置为 document.cookie 属性。

3）移除（）方法

要删除 cookie，remove() 方法会再次设置 cookie，并将过期日期设置为 1970 年 1 月 1 日。请注意，新的 Date(0) 返回一个日期对象，其日期为 1970 年 1 月 1 日。

使用 Cookie 类

下面展示了如何使用 Cookie 类来设置、获取和删除名称为 username，值为 admin 的 cookie：

// set a cookie
Cookie.set(‘username’, ‘admin’);

// get a cookie
console.log(Cookie.get(‘username’)); // admin

// remove a cookie by a name
Cookie.remove(‘username’);

使用网络浏览器查看 cookie

要在 Web 浏览器上查看 cookie，您可以使用 devtools。

首先，单击应用程序选项卡。

其次，选择 Storage 下的 Cookies 节点。

下图为Google.com的cookies：