How to Set Cookie Browser Using Javascript Bootstrap 4 ?

Admin   HTML5 - CSS   168  2021-03-12 16:39:27

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