如何使用 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+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.