Question

我把头靠在墙上，希望有人可以提供帮助。我必须包含三个文本框供用户输入以下cookie的值：名称，城市和爱好。然后我需要使用带有onclick事件的单个按钮，该事件将调用该函数来创建三个cookie（带有值）。我还需要一个能够在访问页面时检查每个cookie是否存在的函数。如果未设置一个或多个cookie，则警告框应通知用户设置未设置的cookie。如果设置了所有三个cookie，则警告框应显示每个cookie的内容。

我认真地挂断（我认为）是关于如何将文本框中的值和相应的键作为参数传递给通用setCookie函数。 W3schools提供了一个用于创建，获取和检查cookie的代码模板（下面），但我不知道如何通过用户输入设置cookie或一次设置所有3来实际实现它！我看起来像砖一样严重。

我的html文本框和提交按钮：

Please enter your name: <input type = "text" name = "name" id = "name"> <br>
                Please enter your city: <input type = "text" name = "city" id = "school"><br>
                Please enter a hobby: <input type = "text" name = "hobby" id = "hobby"><br>
                <button id = "btn12" onclick = "createCookies()">Create cookies</button></p>
                </form>

W3schools cookie模板：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

任何帮助都会非常感激！我已经搜索了我在Javascript中设置Cookie时可以找到的所有内容，并且无法对其进行改进。

Answer 1

这绝对是可能的。我使用上面的HTML做了一个例子。它有点长，但我会把它包含在这里，就像StackOverflow所期望的那样。

HTML：

<p>
  Please enter your name:
  <input type="text" name="name" id="name">
  <br> Please enter your city:
  <input type="text" name="city" id="city">
  <br> Please enter a hobby:
  <input type="text" name="hobby" id="hobby">
  <br>
  <button id="btn12">Create cookies</button>
</p>

JavaScript的：

document.getElementById('btn12').addEventListener('click', createCookies);

// jsfiddle runs code after page loads -- in other environments
// run this on page load
document.getElementById("name").value = getCookie("name");
document.getElementById("city").value = getCookie("city");
document.getElementById("hobby").value = getCookie("hobby");

function createCookies(evt) {
  evt.preventDefault();

  setCookie('name', document.getElementById("name").value);
  setCookie('city', document.getElementById("city").value);
  setCookie('hobby', document.getElementById("hobby").value);
}

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  exdays = exdays || 30; // default to 30 days
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}

您可以在输入中添加一些值，点击“创建Cookie”按钮，然后重新加载页面，输入应该包含您之前输入的值。

它是如何工作的？我们需要在加载时设置输入值。有一些代码可以做到这一点 - 这些行：

document.getElementById("name").value = getCookie("name");
document.getElementById("city").value = getCookie("city");
document.getElementById("hobby").value = getCookie("hobby");

如果没有值，输入将被设置为空，所以没有问题。

点击后，我们运行以下代码：

function createCookies(evt) {
  evt.preventDefault();

  setCookie('name', document.getElementById("name").value);
  setCookie('city', document.getElementById("city").value);
  setCookie('hobby', document.getElementById("hobby").value);
}

调用您的setCookie函数 - 我对其进行了修改，因此默认为30天（第3个参数）只是为了让事情变得简单。

JSFiddle：https://jsfiddle.net/z7ayebpr/

Answer 2

上面的Cymen的代码肯定对我有用！

我想为第一次创建Cookie的任何人添加一条注释。您很可能最初是在本地设置的，这完全没问题。只知道，如果您使用的是Chrome，则在测试/调试时将无法在浏览器中看到本地存储的Cookie。

如果您使用的是Chrome，请考虑切换到Firefox进行此类调试。

通过单击Firefox浏览器（右上角）中的选项，然后选择“ Web开发人员”，然后选择“存储检查器”，可以在本地存储中查看Cookie。然后，Firefox开发人员工具将打开并导航到存储。展开cookie，选择文件，您应该会看到刚刚创建的cookie。

这使得在将代码推送到dev分支并启用错误代码之前，更容易开发和优化cookie。

（不要介意示例图片中糟糕的标记）

设置/获取/检查用户输入（文本框）一次性生成的多个cookie

2 个答案: