如何使用 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。


请注意，与该站点关联的 Cookie 有 3 个，但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年9月21日

2K+ 浏览量

启动您的职业生涯

通过完成课程获得认证

开始
广告