如何使用 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+ 瀏覽量

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.