View video tutorial

HTML Cookies

HTML

Cookies store a small amount of information in the user's browser.

What is a Cookie?


A cookie is a small piece of data that a server sends to a user's web browser.

The browser can save cookies and return them to the same server upon subsequent request.

Cookies purposes


Cookies are mainly used for three purposes

Session management: Login, shopping cart, game score or anything else should be remembered by the server.

Personalized settings:User preferences, themes and other settings.

Tracking User:Recording and analysis of user behavior.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Cookie Example</title>
    <style>
             .button1 {
                width: 150px;
                height: 50px;
                background-color: rgb(235, 105, 53);
                font-size: 14pt;
                color: white;
                border-radius: 10px;
                margin:10px;
            }
            .button1:hover {
                background-color: rgb(235, 75, 12);
                color: white;
            }
    </style>
    <script>
        function create() {
            document.cookie = "cookie1=html";
            document.cookie = "cookie2=css";
            alert(document.cookie);
        }
    </script>
</head>
<body>
    <h2>HTML Cookie Example</h2>
    <button class="button1" onclick="create()">Create Cookie</button>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Cookie Example</title>
    <style>
        .button1 {
            width: 150px;
            height: 50px;
            background-color: rgb(235, 105, 53);
            font-size: 14pt;
            color: white;
            border-radius: 10px;
            margin: 10px;
        }
        .button1:hover {
            background-color: rgb(235, 75, 12);
            color: white;
        }
    </style>
    <script>
        function create() {
            document.cookie = "mycookie1=chocolate";
            document.cookie = "mycookie2=strawberry";
            alert(document.cookie);
        }
        function removedall() {
            var allCookies = document.cookie.split(';');
            for (var i = 0; i < allCookies.length; i++)
                document.cookie = allCookies[i] + "=;expires="
                    + new Date(0).toUTCString();

            alert("All cookies removed");

        }
        function show() {
            alert(document.cookie);
        }
    </script>
</head>
<body>
    <h2>HTML Cookie Example</h2>
    <button class="button1" onclick="create()">Create Cookie</button>
    <button class="button1" onclick="removedall()">Remove Cookies</button>
    <button class="button1" onclick="show()">Show Cookie</button>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.