Search within TutorialsPark

Javascript Cookies: Introduction


To store small amounts of user specific information on User's Machine.


Javascript Cookies: Introduction

The prime goal of JavaScript and other Web Technologies is make user experience better and pleasant, to attain this goal some basic features used are webdesign and Navigation while advanced features include personalization using Cookies or WebStorage

Personalization involves storing user related information and settings, it creates a custom enviornment every time a user visits the website.

A good example of personalization can be amazon.com and its one-click purchasing system. The website keeps a record of user's purchasing details, credit card number, delivery address etc to enable purchase with just one click.


Javascript Cookies: What are Cookies?

HTTP Cookies, also commonly called as just cookies are used to store session information on the client's machine

It process of Cookie creation begins with the server sending a Set-Cookie HTTP header, which contains session information as a part of a response to an HTTP request.

But using JavaScript you can set cookies on the local browser, without the need for the server program to send them, and hence reducing the server load.

The sample code below shows the header of a server response.

A HTTP response similar to one above sets a cookie with the name of "name" and a value of "value", also both the name and the value are URL encoded when sent.

Such session informations are stored in the browser and is sent back to the server using the Cookie HTTP header for every request after that.A sample Cookie HTTP header is shown below.

These information being sent back to the server ensures that the client which sent the request is uniquely identified.


Properties of a JavaScript Cookie.

1. Cookies comprises of text in form of name/value pairs, commonly also called as "crumbs"

2. Cookies are attached to specific domain, and when set it is sent along with all requests to the same domain which created it, ensuring that the information within these cookies are available only to approved domains.

3. Cookies are stored on client's machine and hence to disallow it from occupying too much space, there exists an upper limit to number of cookies per domain, this upper limit varies from browser to browser.

  • Internet Explorer and Firefox: Maximum of 50 cookies per domain.
  • Opera: Maximum of 30 cookies per domain.
  • Safari & Google Chrome: No limit of cookies per domain.

4. When the number of cookies exceeds the maximum limit, the browser begins to eliminate old cookies using the least recently used (LRU) method, thus vacating space for new cookies.

5. There is also a size upper limit for cookies, its around 4KB(4096 bytes), this size upperlimit is applicable to all cookies for a domain, and not per cookie. Any cookie exceeding this size upperlimit gets dropped.

Cookies can be turned off and completely removed from the hard disk. Eg: for Firefox browser visit Tools => Options => Privacy where you have the option to block all cookies from any websites. Similarly all other browsers have a such options within their privacy settings.


Attributes of JavaScript Cookies.

A cookie comprises of following pieces of information:

Name: Every Cookie has an unique name to identify itself, it is case insensitive, but some server software may treat them as case-sensitive.

The name of the cookie must be URL-encoded using the built-in method escape(),cookie name can be a Session ID, login ID etc

Value : To set the string value stored in the cookie, must be URL encoded as well.

Format and Example: JavaScript Cookies - Name-Value Attribute.

Expiration Date: A cookie is deleted(i.e expired) when the browser session ends, which is usually a very small time. But you have an option of specifying the expiration date as well.

The value is set as date using GMT format(Wdy, DD-MM-YYYY HH:MM:SS GMT), specifying the exact deletion date and hence the cookie remains on the client's machine even after browser program is closed.

Format and Example: JavaScript Cookies - Expiration Date.

Domain : The Domain name is used to specify the domain(or website/subdomain) for which the cookie is valid.If nothing is specified then the domain is assumed to be the website from which the cookie was set.

Format and Example: JavaScript Cookies - Domain.

Path: To specify the path within the specified domain for which the cookie should be sent to the server.

Eg: by specifying that the cookie will be accessible only from http://tutorialspark.com/javascript/ so that pages at http://tutorialspark.com wont sent cookie data even through the request comes from same domain.

Format and Example: JavaScript Cookies - Path.

Secure Flag: When set, the cookie data is sent to the server only when an SSL(Secure Socket Layer) connection is used.Its a boolean value with default value as false, meaning cookie will be sent regardless of SSL connection.

Eg: Cookie information will be sent to requests made only for https://tutorialspark.com and not for http://tutorialspark.com

Format and Example: JavaScript Cookies - Secure Flag.