JavaScript Cookies – Get, Set and Delete Cookies

JavaScript Cookies are the most efficient way of remembering preferences, purchases or other information required for visitor better experience.

JavaScript Cookies Syntax


document.cookie = "name=value; expires: UTC dateTime; path: path/to/url/; domain: mycodingtricks.com";

Set Cookies

JavaScript can get, set and clear cookies with the document.cookie property.

Example 1: Simplest way to Add Cookie in JavaScript.


document.cookie = "username=mycodingtricks";

Example 2: Creating Cookie with expiry date (in UTC time).

By Default, Cookie is deleted when browser is closed.

document.cookie = "username=mycodingtricks; expires=Tue, 31 May 2016 12:00:00 UTC";

Example 3: Set Cookie for a Particular Page.

By Default, Cookie belongs to current page.

document.cookie = "username=mycodingtricks; expires=Tue, 31 May 2016 12:00:00 UTC; path: /snippets/javascript/javascript-cookies/";

In the Above example we have added path parameter value to our current post path url.

Function to Set a Cookie

Ok! So now, we have seen 3 Examples to add a cookie.

Set JavaScript Cookies

Now we will create a function to set a Cookie.


function setCookie(name, value, expirydays) {
 var d = new Date();
 d.setTime(d.getTime() + (expirydays*24*60*60*1000));
 var expires = "expires="+ d.toUTCString();
 document.cookie = name + "=" + value + "; " + expires;
}

Code Explained:

In above code We have create a function named setCookie with 3 Parameters. Parameter are self explained from their names, but let me explain them for those who didn’t understand:

  1. name Parameter is name of the Cookie.
  2. value Parameter is to set Value of the Cookie.
  3. expirydate Parameter is used to set Expiry date of the Cookie.

Read Cookies

Get JavaScript Cookies

With JavaScript, cookies can be read like this:


var cookies = document.cookie;

It will return all cookies in one string much like: username=mycodingtricks; cookie1=value1; cookie2=value2;

Function to Get Cookies

You can use the function given below to get Cookies in JavaScript.

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

Delete Cookie

To Delete a JavaScript Cookie, set the expiredate parameter to a passed date;

document.cookie = "username=; expires=Tue, 31 May 2015 12:00:00 UTC";

Function to Delete Cookie

Delete JavaScript Cookies
You can use the below function to delete a cookie.

function deleteCookie(name){
  setCookie(name,"",-1);
}

In the Above function we have set the expiredate to previous day i.e. -1 day before today.

Delete All Cookies

You can use the below JavaScript function to delete all the Cookies set in the browser.

function deleteAllCookies(){
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++)
  deleteCookie(cookies[i].split("=")[0]);
}

Conclusion

That’s all about JavaScript Cookies.

I’m sharing this article because, some of my readers are beginner in JavaScript and many from you guys asked to add cookies option in shareIt.js content locker plugin. So this Article will be used to add the cookies option.

If you like this Article, then Please share it with your friends.

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *