如何使用 JavaScript 只为特定页面设置 Cookie？

我们可以使用 JavaScript 为特定页面设置 Cookie。我们使用 document.cookie 属性的 path 属性在特定网页上设置 cookie。Cookie 是存储重要信息（例如用户名、电子邮件、会话 ID 和其他偏好设置）的小型文本文件（4 KB），这些信息有助于为特定用户自定义网页。

像这样的琐碎事情是用户偏好，因此可以方便地存储在相应的 Cookie 文件中。

Window 位置的 pathname 属性返回一个包含当前网页路径的字符串。路径是有关当前网页存储在服务器上的基本信息。

document.cookie

document.cookie 属性返回一个由 (;) 分隔的 名称/值 对列表。它存储与当前网页相关的 Cookie 信息。我们可以通过提供名称/值对来设置 Cookie。我们使用 document.cookie 属性的 path 属性在特定网页上设置 Cookie。

语法

document.cookie = "name = yourName; path = yourPath";

其中“yourPath”是要设置 Cookie 的特定页面的路径。

让我们看一个例子来更好地理解。

示例 1

在下面的代码片段中，我们验证并提取用户输入的值，并在当前网页上使用名称/值对创建 Cookie。

<html>
<head>
</head>
<body>
   Set cookie on a specific page !
   <form name="myform" action="">
      Enter name: <input type="text" name="customer" />
      <input type="button" value="Set Cookie" onclick="WriteCookie();" />
   </form>
   <div id = "result"></div>
   <script>
      function WriteCookie() {
      
         // user input validation
         if (document.myform.customer.value == "") {
            document.getElementById("result").innerHTML = "Enter some value!";
            return;
         }
         cookievalue = encodeURIComponent(document.myform.customer.value) + ";";
         var myPath = window.location.pathname;
         document.cookie = "name=" + cookievalue + "path=myPath";
         document.getElementById("result").innerHTML = "Setting Cookies : " + "name=" + cookievalue;
      }
   </script>
</body>
</html>

收集用户输入，进行验证，然后用于创建 Cookie。我们使用 encodeURIComponent 转换用户输入的值，并将其转换为 资源标识符字符串 的形式。由于 Cookie 作为 HTTP 标头 发送，因此在创建 Cookie 之前对其值进行 编码 是一个好习惯。这确保值遵循 HTTP 标准，方法是用 转义字符 替换某些字符。

注意，但是 document.cookies 不会返回与网页关联的所有 Cookie。使用像 JavaScript 这样的服务器端语言，我们有一个限制，即仅在具有 HttpOnly 标志的安全同站点连接中发送 Cookie，因此 JavaScript 无法访问它们。

例如，在上面的代码中，我们只获取 _fbp Cookie，而不获取与 sessionId 相关的其他 Cookie。

如果我们通过单击搜索栏中 URL 之前的那个小锁图标来检查站点的 Cookie，我们可以访问与该站点相关的所有 Cookie。


请注意，有 3 个 Cookie 与该站点相关联，但 document.cookie 仅显示一个可供 JavaScript 访问的 Cookie。

我们可以将 Cookie 设置为可供所有网页访问。这可以通过将 path 属性设置为“/”来完成。除此之外，我们可以使用 expires 属性来设置 Cookie 的有效期。

示例 2

在下面的代码片段中，我们从用户那里获取名称-值对，并在文档对象中设置相应的 Cookie。

<!DOCTYPE html>
<html>
<body>
   <p>Enter a Name-value pair: </p>
   <input id = "cookie" type = "text">{name=value}
   <br>
   <p>Click the below button to create a new cookie. </p>
   <button id = "button" onclick = "create()">
      Create !
   </button>
   <br>
   <p id = "alert"> </p>
   Click below to show all cookies !
   <button id = "show" onclick = "show()">
      show cookies !
   </button>
   <div id = "result"></div>
   <script>
      var result = document.getElementById("result");
      function create(){
         var cookieObj = document.getElementById("cookie");
         if (cookieObj.value.length == 0){
            alert("Please Enter name-value pair")
         }
         else{
            var value = cookieObj.value
            document.cookie = value ;
            document.getElementById("alert").innerHTML = "cookie created !";
         }
      }
      function show(){
         var val = document.cookie;
         result.innerHTML = "Name/ Value pair of Cookies: " + val;
      }
   </script>
</body>
</html>

“创建！”按钮触发 create() JavaScript 函数，然后创建新的 Cookie。然后可以使用显示按钮查看新添加到网页的 Cookie。

结论

Cookie 是一种创新的技巧，可以通过存储有关用户的小部分详细信息来增强用户体验。但是，它们也用于许多恶意攻击，因此应谨慎处理。

更新于: 2022-09-21

2K+ 阅读量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告