How to Set Cookie Browser Using Javascript Bootstrap 4 ?

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" target="_blank" rel="nofollow" > 
</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" rel="nofollow"  target="_blank">more information</a> 
                    <a href="javascript:" target="_blank" rel="nofollow"  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>