Cookies in JavaScript

Cookie is one of the most important concept in web design which help you to maintain some state in a stateless environment. Of course there are different views with respect to security of cookie, but it doesn't mean we shouldn't use it. While using we need to make sure that we don't have any sensitive data in the cookie. because its very easy for any hacker to read it from your browser.
Lets start understanding how can we play with cookies in JavaScript, but before that lets have a look at the structure of cookie.If you open browser and check how cookie look like, you will find following content in it-

Name: send
Content: 1342885667964
Host: 107.22.149.124 (Or SomeTimes- Domain : .abc.com)
Path: /
Send For: Any type of connection
Expires: Never Or SomeDate(Thursday, July 20, 2017 9:17:47 PM)

You can use JavaScript to create cookies by using the document.cookie property.
Following code shows how can we set cookie using JavaScript -

    var key = "Cookie-Key";
    var val = "Cookie-Value";
    var myCookie = key + "=" + val;
    document.cookie = myCookie;

We can always add expire date to the cookie like this -

    var key = "Cookie-Key1";
    var val = "Cookie-Value";
    var myCookie = key + "=" + val;
    var date = new Date();
    var numOfMilisecond = 10000;
    date.setTime(date.getTime()+numOfMilisecond)
    var expireDate = date.toGMTString();

    document.cookie = myCookie + ";expires=" + expireDate;

If we execute this code then cookie saved is -

Name: Cookie-Key1
Content: Cookie-Value
Host: localhost
Path: /TestApp/
Send For: Any type of connection
Expires: Thursday, October 11, 2012 10:09:03 PM

In the above code we can get the current date using getDate() function and can add the number of millisecond in it. For example if we want the cookie for 24 hour then the number will be adding is -
24 * 60 * 60 * 1000 = 86400000.
Once we have the current date then we convert it into GMT time and set it into cookie.

If you see currently the cookie is been set for this virtual directory only, but what if we want it ti be for the whole domain. We can do it by explicitly setting the path. Here is the code which demonstrate how to set the path property in the cookie -

    var key = "Cookie-Key3";
    var val = "Cookie-Value";
    var myCookie = key + "=" + val;

    var date = new Date();
    var numOfMilisecond = 10000;
    date.setTime(date.getTime()+numOfMilisecond)
    var expireDate = date.toGMTString();
    var path = ";path=/";

    var myCookie = key + "=" + val + ";expires=" + expireDate + path;
    document.cookie = myCookie + ";expires=" + expireDate;

Once you browse this page you will find the cookie properties as following -

Name: Cookie-Key2
Content: Cookie-Value
Host: localhost
Path: /
Send For: Any type of connection
Expires: Thursday, October 11, 2012 10:20:25 PM

We can always set the domain by using domain = images.mydomain. We can not set the domain out of the domain from where is the content is been served. for example if the page is coming from microsoft.com i can not set the domain as amazon.com.

We can use the "secure" property of cookie to transmit the cookie on secure connection. By setting secure flag in a cookie depicts that the cookie will be sent only when the connection uses SSL, such as an HTTPS connection. in the above code append "secure" in the cookie like this -
var myCookie = key + "=" + val + ";expires=" + expireDate + path + domain + ";secure";

After this if you analyze the cookie then you will find the property "Send For" is changed -
Send For: Encrypted connections only

Reading cookie-
If we want to read existing cookie in JavaScript then we can use the document.cookie to read the cookie. It will return ";" separated cookies.
var cookies = document.cookie.split(";");

Deleting Cookie -
There is not way provided by JavaScript by which you can delete a cookie. If we want to remove any cookie we can always set it expire time as sometime in past.