javascript - 一次性设置/获取/检查由用户输入(文本框)生成的多个 cookie

Question

我正在用头撞墙，希望有人能帮忙。我必须包含三个文本框，供用户输入以下 cookie 的值:姓名、城市和爱好。然后我需要使用一个带有 onclick 事件的按钮，该事件将调用该函数来创建三个 cookie(带有值)。我需要一个进一步的函数来在访问页面时检查每个 cookie 是否存在。如果未设置一个或多个 cookie，则会出现一个警告框，通知用户设置未设置的 cookie。如果设置了所有三个 cookie，则警报框应显示每个 cookie 的内容。

我真正困惑的地方(我认为)是如何将文本框中的值和相应的键作为参数传递给通用 setCookie 函数。 W3schools 提供了一个用于创建、获取和检查 cookie 的代码模板(如下)，但我不知道如何通过用户输入设置 cookie 或同时设置所有 3 个 cookie 来实际实现它!看来我真是厚如砖头。

我的 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);
        }
    }
}

任何帮助将不胜感激!我已经用 google 搜索了所有能找到的有关在 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 天(第三个参数)，只是为了让事情变得更容易一些。

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