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

JS教程10个月前发布 admin
1,564 0

在本教程中,您将了解 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:

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

 

总结

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

服务器使用 cookie 来识别两个连续的请求是否来自同一个 web 浏览器。

要管理 cookie,您可以使用 document.cookie 对象。 为了提高效率,您可以使用 Cookie 实用程序类。

使用 encodeURIComponent() 和 decodeURIComponent() 函数对 cookie 值进行编码和解码。

 

© 版权声明

相关文章

暂无评论

暂无评论...