document.cookie() 函數在 Javascript 中不起作用

Question

當用戶在文本框中輸入時，我試圖在 JavaScript 中設置 cookie，但它似乎無法正常工作。 當我嘗試警報或 console.log 時。 我得到 "" 值。 請幫我解決這個問題。

HTML代碼：

<form action="confirm.html" id="interestForm" onsubmit="storeInHidden1()">
  <input type="text" name="userName">
  <input type="submit" value="Register">
</form>

JS代碼：

function storeInHidden1(){
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
   var queryStringDetails = urlParams.get("userName");
   document.cookie = "name=" + queryStringDetails;
   alert(document.cookie);
}

Answer 1

問題

設置一個 cookie 像

document.cookie = "name=" + variable 

根據w3schools的說法，這是一種有效的方法。 但是問題是您試圖訪問不存在的 url 參數，這就是您的 cookie 為空的原因。 假設在example.com/index.html您有以下表單：

<form action="confirm.html" id="interestForm" onsubmit="storeInHidden1()">
  <input type="text" name="userName">
  <input type="submit" value="Register">
</form>

onsubmit代碼運行函數storeInHidden1() ，該函數試圖獲取window.location.search仍然是空的，因為您的代碼中沒有設置example.com/index.html上的window.location.search 。

接下來根據表單中的action="confirm.html" ，所有數據都通過GET請求發送到（例如） example.com/confirm.html 。 這個 url 現在有?userName=JohnDoe的參數。 如果您現在在此頁面上運行storeInHidden1 ，您實際上會在您的 cookie 中獲得一些內容。

解決方案

為了將用戶名保存在index.html上的 cookie 中，您只需更改storeInHidden1的代碼。 不是從 url 中獲取用戶名，而是直接從帶有document.getElementsByName("userName")[0].value的表單中獲取它。 完整代碼可以在下面找到：

function storeInHidden1() {
  var user = document.getElementsByName("userName")[0].value;
  document.cookie = "name=" + user;
  alert(document.cookie);
}

<form action="confirm.html" id="interestForm" onsubmit="storeInHidden1()">
  <input type="text" name="userName">
  <input type="submit" value="Register">
</form>