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

Question

我正在尝试为 friend 制作一个简单的网站。目的是选择一张票并显示警报并禁用显示票已被兑换的按钮。我还想将其存储在 cookie 中，因为如果我的 friend 离开网页，这些值将恢复为默认值，而不是基于我 friend 所做的选择。
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 上，这样我就可以随时检查我的 friend 选择禁用票证和按钮可用性的选项。
另外，我该如何检查我的 friend 是否选择了一张票来禁用某些选项(通过“某些选项”，我指的是禁用按钮并将图像更改为损坏的票”？
提前致谢!

Answer 1

您可以使用 document. cookie存储答案，您可以查看下面的链接以了解它是否存在。
Got it from here:
最终的:

<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>