如果用户使用 JavaScript 单击 cookie 上的按钮，我该如何存储？

Question

我正在尝试为朋友制作一个简单的网站。 目的是选择一张票并显示警报并禁用显示该票已被兑换的按钮。 我还想将其存储在 cookie 中，因为如果我的朋友离开网页，这些值将恢复为默认值，而不是基于我朋友所做的选择。

HTML 代码是这样的：

<img id="first_ticket" src="ticket_not_edited.png" width="50%">
<br>
<button id="first_button" class="ticket1" onclick="first()">Redeem</button>

JavaScript 代码为：

 function first() {
  alert("You've redeemed successfuly the first ticket.");
  document.getElementById("first_button").style.background='#FF0000';
  document.getElementById("first_button").disabled = true;
  document.getElementById('first_button').src='broken_ticket.png';
  document.getElementById('first_button').innerHTML = "REDEEMED";
}

目的是将用户的选择存储在 cookie 上，这样我就可以随时检查我的朋友选择了什么来禁用票和按钮的可用性。

另外，我怎样才能检查我的朋友是否选择了禁用某些选项的票（通过“某些选项”我指的是禁用按钮并将图像更改为损坏的票“？

提前致谢！

Answer 1

您可以使用document. cookie document. cookie来存储答案，您可以在下面的链接中查看它是否存在。

从这里得到它：

最后：

<img id="first_ticket" src="" width="50%">
<br>
<button id="first_button" class="ticket1" onclick="checkIfExists()">Canjear</button>

<script>
    // check if it Exists
    function getCookie(name) {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1) {
            begin = dc.indexOf(prefix);
            if (begin != 0) return null;
        }
        else {
            begin += 2;
            var end = document.cookie.indexOf(";", begin);
            if (end == -1) {
                end = dc.length;
            }
        }
        return decodeURI(dc.substring(begin + prefix.length, end));
    }

    var myCookie = getCookie("first");

    if (myCookie == null) {
        alert('Welcome! Please Choose A ticket below.');
    }
    else {
        alert('Welcome back! You already choose a ticket!');
        document.getElementById("first_button").style.background = '#FF0000';
        document.getElementById("first_button").disabled = true;
        document.getElementById('first_button').src = 'broken_ticket.png';
        document.getElementById('first_button').innerHTML = "REDEEMED";
    }

    function checkIfExists() {
        if (myCookie == null) {
            document.cookie = "first = 'yes'";
            alert("You've redeemed successfuly the first ticket.");
            document.getElementById("first_button").style.background = '#FF0000';
            document.getElementById("first_button").disabled = true;
            document.getElementById('first_button').src = 'broken_ticket.png';
            document.getElementById('first_button').innerHTML = "REDEEMED";
        }
        else {
            alert('Oh. You already choose a ticket.');
        }
    }

</script>