index.html

<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>쿠키 테스트</title>
    <style>
        table {
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('now').innerText = new Date().toLocaleTimeString();
            document.getElementById('foo').innerText = Cookies.get('foo') || '';
        });

        function setCookie() {
            Cookies.set('foo', new Date().toLocaleTimeString(), {expires: 7});
            location.reload();
        }

        function deleteCookie() {
            Cookies.remove('foo');
            location.reload();
        }
    </script>
</head>
<body>
<table>
    <thead>
    <tr><th>Key</th><th>Value</th></tr>
    </thead>
    <tbody>
    <tr>
        <td>현재 시각</td>
        <td id="now"></td>
    </tr>
    <tr>
        <td>Cookie</td>
        <td id="foo"></td>
    </tr>
    </tbody>
</table>
<button onclick="setCookie()">쿠키 설정</button>
<button onclick="deleteCookie()">쿠키 제거</button>
</body>
</html>