Skip to content

All topics  /  Bootstrap

How to Set Cookie Browser Using Javascript Bootstrap 4 ?

Bootstrap ·

When “How to Set Cookie Browser Using Javascript Bootstrap 4 ?” moves through design, development and browser testing, the official Monitask website can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with MDN Web Docs before adopting it in production.

Hello Friends,

In this blog, I will show you how to set cookie in browser using javascript bootstrap 4. We will learn that how to set cookie in browser using javascript with bootstrap 4. When a user visits a web page then set cookie using javascript with bootstrap 4. A cookie is a small text file that lets you store a small amount of data on the user's computer.

Here I will give you full example for how to set cookie using javascript with bootstrap 4. So let's see bellow example

Example :


<!DOCTYPE html>
<html>
<head>
    <title>Set Cookie Browser Using Javascript Bootstrap 4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style type="text/css">
    .cookie-para a{
        color:#DE2135;
    }
    .cookie-bar{ position: fixed; bottom:0px; padding:15px; width: 100%; display: none; z-index:5000000; background-color:#252B33;}
    .cookie-para { text-align:left; padding-top:5px; color: white; font-size:15px; font-weight: normal; display: inline-block;padding-bottom: 5px; width:100%;}
    .cookie-space { padding-bottom: 45px; }
    .cookie-btn{ font-size:14px; color: #ffffff !important; background:#DE2135; padding: 10px 18px; border-radius:20px;display: inline-block; margin-left: 1%; text-decoration:unset;}
</style>
<body>
    <div class="container-fluid p-0">
        <section class="cookie-bar">
            <div class="cookie-notice container">
                <p class="cookie-para">We use cookies to ensure that we give you the best experience on our website. If you continue, you agree with our cookie policy.
                    <a href="https://en.wikipedia.org/wiki/Cookie" target="_blank">more information</a>
                    <a href="javascript:;" class="cookie-btn">That's Okay</a>
                </p>
            </div>
        </section>
    </div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if (readCookie("cookie_accepted") == "1") {
        $(".cookie-bar").hide();
    }else{
        $(".cookie-bar").show();
            $("body").addClass("cookie-space");
            $(".cookie-btn").click(function () {
                $("body").removeClass("cookie-space");
                $(".cookie-bar").fadeOut();
                createCookie("cookie_accepted", 1, 365);
            });
        }
    });
    function getParameterByName(name, url) {
        if (!url) {
            url = window.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return "";
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    function createCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        expires = "; expires=" + date.toUTCString();
    }
        document.cookie = name + "=" + value + expires + "; path=/";
    }
    function readCookie(name) {
    var nameEQ = name + "=";
    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, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
        return null;
    }
    function eraseCookie(name) {
        createCookie(name, "", -1);
    }
    $(document).ready(function () {
        var advMedium = getParameterByName("advm");
        if (advMedium != null) {
            $("input[name=advm]").val(advMedium);
            createCookie("advm", advMedium, 1);
        }else{
            advMedium = readCookie("advm");
            $("input[name=advm]").val(advMedium);
        }
        var nodeCount = document.getElementsByName("ft").length;
        for (count = 0; count < nodeCount; count++) {
            document.getElementsByName("ft")[count].value = window.location.href;
        }
    });
</script>
</html>

It will help you...

More on this topic