HTTP Cookies

Http cookie，也被称为web cookie，是服务器发送给Web浏览器的一小段数据。浏览器可以存储这些cookie，并在其他请求中将其发送回服务器。Cookie的典型用途是识别来自同一资源（浏览器）的多个请求。它有助于用户保持登录状态并跟踪他的数据，例如用户名和会话。它还有助于为无状态HTTP协议记住有状态的信息。

作为开发人员，您不能跳过cookie，因为它对于会话管理和跟踪其他用户信息非常有帮助。cookie现在与应用程序的任何其他功能一样重要。对于用户和开发人员来说，cookie使很多事情变得更加容易。

Cookie已经被广泛使用，并得到了很好的发展。Cookie只不过是关于Web应用程序的文本信息。当用户访问网站时，某些信息会保存到系统的本地存储中，以便如果他们再次访问，应用程序能够识别用户并显示相关结果。

当用户访问任何网站时，他从服务器请求应用程序的主页，当他选择任何特定的操作时，他再次请求应用程序的其他页面。因此，如果用户每次访问第100个页面，请求将是唯一的。由于对服务器的请求非常密集，所以不可能直接将数据保存到服务器上；此外，如果用户不再访问，收集的信息将是多余的。因此，为了记住用户的身份，服务器会随响应一起发送cookie，并将其保存到系统的本地存储中。下次同一客户端发起请求时，服务器将识别其身份并相应地显示结果。

Cookie对于服务器来说是唯一的，所以用户可能在系统中有许多cookie，但服务器能识别属于自己的cookie。

Cookie的使用

以下是cookie的一些常见用途：

会话管理：

Cookie的主要用途是管理用户登录、购物车详情、游戏得分或用户下次登录时服务器应该记住的其他任何信息。

通常，会话管理通过应用程序为用户与服务器之间提供安全的交互。由于用户继续与Web应用程序进行交互，他们每次访问网站都会创建一个新的请求。因此，它提供了一种跟踪会话期间用户状态和活动的简单方式。

跟踪：

跟踪涉及记录用户的活动并分析他们的行为，以便个性化内容。它记录和分析用户的习惯和兴趣，并找到他们访问的页面。跟踪细节可能包括会话期间在页面或整个网站上花费的时间。用户跟踪中有一些敏感信息，因此用户应该意识到访问不安全网站的漏洞，并尽可能避免访问此类网站。

个性化：

Cookies help in personalizing user preferences, themes, and other settings. Most of the time, these settings are synchronized with a central database to personalize the things for the users when the user logs in for the first time. The user personalization keeps the information of the user preferences and settings for reapplying when the user logs in or restarts the application.

认证

Cookies在用户认证中也非常重要。当用户登录时，服务器使用“Set-Cookie”HTTP头部作为响应来设置一个带有唯一“会话标识符”的Cookie。

下次相同用户请求相同域名时，浏览器使用“Cookie”HTTP头部发送Cookie。

因此，服务器可以获得请求的发起者信息。

Cookie的工作原理

用户与网站进行交互时，会发送一个新的请求到服务器，每次在应用程序中执行任何操作时，都会发送一个新的请求到服务器。服务器会将每个新请求视为来自不同的用户。

为了识别相同用户的请求，开发人员需要在服务器的响应中添加Cookie，该Cookie存储在系统的本地内存中。因此，如果相同用户发送请求到服务器，服务器会使用Cookie来识别用户。

从客户端的通信方面来看，Web浏览器是从客户端向服务器发送请求的媒介。

开发人员添加Cookie后，可以对用户发送的请求进行识别，并根据个性化要求发送响应。

从用户和开发人员的角度来看，Cookie非常重要。它有助于两者得到正确的响应。

让我们来了解如何在JavaScript中创建Cookie。

JavaScript Cookie

让我们了解如何在JavaScript中创建Cookie：

创建Cookie

当服务器接收到请求时，可以通过响应发送一个或多个“Set-Cookie”头部。Cookie将存储在系统的本地存储中。因此，下次当浏览器向服务器发送请求时，它也会发送Cookie。

我们还可以指定Cookie的到期日期或时间段后，该Cookie将过期并不应发送。我们还可以对特定域和路径设置一些额外的限制，以限制发送Cookie的时机。

JavaScript提供了document.cookie属性来创建、读取、更新和删除Cookie。

以下是创建Cookie的语法：

document.cookie="cookie-name=value";

有两种不同的方式来创建HTTP cookie。我们可以在客户端使用浏览器控制台创建cookie，也可以在文件的脚本部分从服务器添加cookie。要从客户端添加，我们可以打开控制台，并通过键入JavaScript代码在浏览器中添加。要从服务器端添加，我们可以添加set-cookie头来创建一个或多个cookie。

让我们了解如何从客户端和服务器端创建cookie。

客户端

要从客户端打开cookie，请打开您的浏览器控制台并执行以下代码：

document.cookie="my-cookie=1"

HTTP Cookies

根据上面的屏幕截图，我们可以确定cookie被存储在我们的本地系统中。

Web服务器端

要从服务器添加cookie，我们需要在用户访问网站时的某个动作上创建cookie。

考虑下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content ="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id ='set_cookie'>Set Cookie</button>
    <script>
      const myCookie = document.getElementbyID("set_cookie")
      myCookie.addEventLister("click", e=> document.cookie = "my-cookie=2")
    </script>
</body>
</html>

从上面的示例中，它将在我们的网页上呈现一个按钮组件。当我们点击按钮时，它会为我们的系统存储创建指定的cookie。

类似地，我们可以添加任何其他事件监听器来创建cookie。我们还可以添加一个onload事件来设置cookie。

让我们了解cookie的属性：

Cookie的属性

所有类型的cookie的属性保持一致；以下是不同类型的cookie的一些常见属性：

Cookie的范围

Cookie的范围决定了cookie将被发送到哪些URL。Cookie的范围可以分为两个不同的属性：

1) 路径

路径是定义cookie范围的属性之一。它指定在HTTP头中发送cookie的特定URL路径。要将cookie设置为不同的路径，我们可以编写以下代码：

document.cookie="cookie_first=1; path=/path1"
document.cookie=" cookie_second=2; path=/path2"

现在，当您访问指定URL的网站，例如example.com/path1，您将发送一个名为“cookie_first=1”的cookie头。

如果您访问另一个URL的网站，例如example.com/path2，您将发送一个名为“cookie_second=2”的cookie头。

除指定的URL之外，其他请求的路径将不会发送任何cookie头。

2) 域

cookie的第二个属性是域。域充当cookie放置的容器。cookie为自己分配一个唯一的域名，这有助于管理员为每个网页的http请求保持特定和有组织的cookie。以下是一个特定域的cookie的示例：

Domain=javatpoint.com将设置可在Javatpoint.com及其子域（如training.javatpoint.com）中使用的cookie。

过期和Max-Age

cookie的“Expires”和“Max-Age”属性确定cookie的生存期或过期日期。它们属于持久cookie类别。除了“permanent cookie”这个名称，”Expires”属性可以在指定日期删除cookie。此外，”Max-Age”属性将在指定时间之后删除cookie。相比之下，会话cookie在当前会话结束时被删除。某些浏览器可以指定当前会话何时结束，包括无限期。

SameSite

SameSite属性允许我们在页面内点击链接时设置cookie。我们已经讨论了如何为特定URL设置http cookie，但是如果您想在直接URL内的链接被点击时设置cookie怎么办？使用SameSite，我们可以通过点击从重定向的新页面链接发送cookie。我们可以指定SameSite以在跨站请求时发送cookie，或者用户点击Web页面上的链接时发送cookie。让我们通过以下示例了解SameSite属性如何允许跨站点cookie。下面的流程将解释从一个页面导航到另一个页面时如何发送和接收cookie。

用户访问一个URL（例如，Javatpoint.com）

他将收到第一方cookie

在Javatpoint.com上，用户将点击一个链接，该链接发送到另一个站点（例如www.tutorialandexample.com）的fetch请求

Tutorialandexample.com将设置一个具有Domain=tutorialandexample.com的cookie

现在，javatpoint.com将持有来自tutorialandexample.com的第三方cookie

SameSite属性指定是否在以下三个值中发送第三方cookie：

Strict

具有strict值的SameSite属性将仅通过第一方cookie上下文发送。它不会考虑第三方cookie。

Lax

SameSite属性的”Lax”值仅在用户点击具有第三方导航的链接时发送。如果SameSite属性未直接设置为第三方链接，则lax是默认值。

None

如果SameSite属性的值为”None”，则cookie将在所有上下文中发送。

我们已经讨论了cookies及其属性，现在让我们来了解一下cookies的类型：

Cookies的类型

以下是根据使用和行为确定的cookies类型：

第一方cookies

第一方cookies是直接从您正在访问的网站的服务器发送到系统的cookies。这些cookies直接存储在您的电脑上，由被访问的网站生成。大多数网站会发送cookies给客户端，以收集有用的信息和分析数据，以改善用户体验。

第一方cookies的最佳示例是身份验证。当用户登录应用程序时，服务器会将cookies发送到客户端并在本地系统中存储它们以识别用户。下次当您登录应用程序时，您就不需要再提交登录信息了。

没有第一方cookies，网站将无法识别用户，并且不会自动登录您或记住您在之前的会话中的偏好设置。

第三方cookies

第三方cookies是由重定向您的第三方域名创建的。它不是由您登录的相同域名创建的。这些cookies通常用于跟踪目的，并且可以在浏览器关闭后继续存储。

第三方cookies的一个很好的示例是来自网站的广告跟踪。您可能会注意到，您在各种电子商务网站上浏览了一些产品，之后开始看到与这些产品相关的广告。这是因为在浏览产品时，您可能已经暴露了来自该特定网站之外的第三方cookies。之后，当您关闭浏览器或该特定网站时，第三方cookies可以用于跟踪您的浏览详细信息，比如您浏览过哪些产品、买了还是没买。之后，您将开始收到与这些产品相关的电子邮件，并从不同的广告机构看到广告。