Show bootstrap modal once using Javascript cookie

October 2, 2019
9:19 AM
0

BeginnerBootstrapCSS3HTML5JavaScript

Show bootstrap modal once using Javascript cookie

Javascript cookies let you store user information in web pages.

Note: If you’re aware about JS cookies, then you skip to the example code to the section Show bootstrap modal once

What are Cookies?

Cookies are data, stored in small text files, on your computer.

When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user and their activities.

Cookies are saved in name-value pairs like:

modal_status = hide

When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to “remember” information about users.

How to create a cookie with JavaScript?

JavaScript can create, read, and delete cookies with the document.cookie property.

With JavaScript, a cookie can be created like this:

document.cookie = "modal_status=hide";

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed:

document.cookie = "modal_status=hide; expires=Mon, 30 Sep 2019 12:00:00 UTC";

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.

document.cookie = "modal_status=hide; expires=Mon, 30 Sep 2019 12:00:00 UTC; path=/";

How to read a cookie with JavaScript?

With JavaScript, cookies can be read like this:

var x = document.cookie;

document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;

How to change a cookie with JavaScript?

With JavaScript, you can change a cookie the same way as you create it, for eg. in below i’ve changed the modal_status=show

document.cookie = "modal_status=show; expires=Mon, 30 Sep 2019 12:00:00 UTC; path=/";

Thus the old cookie is overwritten.

How to delete a cookie with JavaScript?

Deleting a cookie is very simple. You don’t have to specify a cookie value when you delete a cookie. Just set the expires parameter to a passed date:

document.cookie = "modal_status=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Note: You should define the cookie path to ensure that you delete the right cookie. Some browsers will not let you delete a cookie if you don’t specify the path.

Show bootstrap modal once

Below is the example you can use to show the bootstrap modal once for the visitor who visits your site or blog.

function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	var expires = "expires="+ d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

The above JS function will set the cookie in your local machine. In this function we pass the parameters cname which is the cookie name, cvalue which is the cookie value exdays which is the cookie expiry days.

function getCookie(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for(var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') {
			c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
			return c.substring(name.length, c.length);
		}
	}
	return "";
}

The function will get the cookie value if is set. The last final function where we set the modal to show once.

function setBootstrapModal() {
	var modal = getCookie("modal");
	/*Check if modal cookie is set or not*/
	if (modal != "") {
		/*if cookie is set lets hide the modal*/
		$('#exampleModal').modal('hide');
	}
	else {
		/*if cookie is not set lets show the modal for once*/
		$('#exampleModal').modal('show');
		/**
		 * setCookie(cname, cvalue, exdays)
		 * Here i've chosen the cookie to expire by 1 day
		 * so im passing the exdays value as 1
		 */
		setCookie("modal", 'hide', 1);
	}
}

Finally call the function setBootstrapModal();

See the demo page of this whole JS function, when you load this page for the first time the modal is shown and when you reload it, the modal wont the visible.

Thats it! Now it works.


About Author

Karthikesavan

I'm the founder of Proficient Designers. I'm a full time PHP, Wordpress, Android app and UI/UX developer who is passionate in coding.

Comments & Replies