Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

PHP JavaScript jQuery CookiesAfter examining and testing more lines of PHP, JavaScript, and jQuery code than I care to admit I will be sharing with you how to check if a cookie exists with each, and if it doesn’t create one that expires in 30 days.

There are tons of examples out there for each. Some are explained better than others, and some vary slightly. The ones that I will be sharing are tested and working.

There are definitely plenty of others out there though if you do some searching. Most are basically the same concept just variations.

In each example I will be using the following:
Cookie name: test_cookie
The value will be set to: 1
Each will be set for: 30 days
Path: /
The domain name will be: testdomain.com

I’ll start with the easiest first. Well, at least I think it’s the easiest. It certainly is the shortest, which is why I also prefer setting and checking cookies with this one.

Check to see if a cookie exists with PHP, if not set it for 30 days:

PHP Cookies

This says if the cookie named test_cookie does not exist, then set one:
named: test_cookie
value: 1
time: 30 days (the time() +2592000 part above)
path: /
domain: testdomain.com

Now that is short and simple, which is why I like PHP.

 
Check to see if a cookie exists with JavaScript, if not set it for 30 days:

JavaScript Cookies

This one is a bit longer, but fairly simple.

First we are going to create a .js file with a function.

We will call it: cookie.js to keep it simple.

We will also be creating a folder/directory called: js (if you don’t have one. It can be located anywhere.)

So, create the js folder: testdomain.com/js

Inside the js folder make a file called: cookie.js

So, you have testdomain.com/js/cookie.js

Open and edit the blank/empty file: cookie.js

And, paste this into it:

Be sure to save cookie.js after pasting this into it.

In the head section of your html code add:

The whole thing may look something like this:

Note:
You will obviously have other lines of code in the head section. If you are using a PHP CMS you might add it to your header PHP file.

Now, you need to call the function in your html document/file.

Add, this to the html where you want to check and set the cookie:

Once you are content that it’s working you can remove the two alert lines. They are just for visual testing.

You could also shorten it up with the following instead:

Or:

Do not edit or change the cookie.js file code. That one must remain intact for this to work. However, you can edit the code that you add to your html document/file if need be.

This one checks to see if test_cookie exists if so a prompt will say Welcome Back. If test_cookie does not exist it sets test_cookie, with a value of 1 that expires in 30 days, with the path of /, for the domain testdomain.com. A prompt will also say: “This is your first visit”.

Not too difficult, but obviously more work than with PHP.

 
Check to see if a cookie exists with jQuery, if not set it for 30 days:

jQuery Cookies

jQuery is somewhat in between PHP and JavaScript in my opinion. The actual code is shorter than JavaScript, but we need to include a few files to make it work.

First you need to include/add the jQuery lib. This can be stored in a folder similar to the JavaScript example, or you can use Google’s, which is cached and compressed. I will use Google’s in this example, but you can add/upload it to your site if you want it stored locally instead.

So, in the head section of your html code add:

Note:
If your website or CMS is already using jQuery you won’t need to add it, even if it is a different version like 1.8.3, etc.

Second, get jquery.cookie.js from Git Hub:
https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js
or
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

Create a js folder/directory called js and add or upload jquery.cookie.js there.

So, you end up with testdomain.com/js/jquery.cookie.js

Now right under the jquery Google lib code add:

The whole thing may look something like this:

Note:
You will obviously have other lines of code in the head section. It is also important that you add jquery.cookie.js after jquery lib like the above example.

Now, add this to the html where you want to check and set the cookie:

What this does is pretty much the same thing as the others. If test_cookie = null (empty/doesn’t exist), then set test_cookie, with a value of 1 that expires in 30 days, for the path /, and the domain testdomain.com.

If the cookie does exist a prompt will tell you Cookie exists.

After you are done testing, you can remove the else and alert part so it looks like:

Additionally:
jquery.cookie.js is only around 3KBs in size so it’s pretty small, but you could also minify it at:
http://jscompress.com/
or
http://javascript-minifier.com/

After doing so it should be more like 1.25KBs. Not a big savings, but if you are into optimizing why not.

 
For my WordPress friends you could do it with PHP like this instead:

Or even with a function in your functions.php theme file like so:

Or:

And potentially for specific posts, pages, paths, etc. (get creative and use your imagination).

 
Setting a cookie on the about page with the code above:

Firefox Cookies

 
Final Note:
These all accomplish pretty much the same thing. It’s just a matter of programming language. One thing to keep in mind is when using PHP it’s server side, and visitors won’t be able to see your code. JavaScript and jQuery are client side, and visitors could see your code if they were to view the page source.

About: Jeremy LeSarge - AKA: Ray (212 Posts)

I am the site owner and administrator of DialMe.com. I provide help and tips for Boonex Dolphin on the main part of this website where you will also find an assortment of other resources. Here, on the blog I write about a variety of topics surrounding WordPress, technology, social media/networking, SEO, and webmaster resources.