Working with Cookies

Managing Data in a Web Site Using JavaScript Cookies*

*Check and comply with the current legislation regarding handling cookies

Introducing Cookies

• Desired features of a Web site– Users should be able to

• Navigate product listing• Purchase products • Create accounts

Developing a Shopping Cart Application

• Back end – Mechanism that helps Web site function behind

the scenes

• Front end– Visible part of a Web site

Developing a Shopping Cart Application

• Server-side shopping cart– Shopping cart application controlled via server

• Client-side shopping cart – Application controlled via user’s browser with

JavaScript

Client-Side and Server-Side Shopping Cart Applications

Understanding Cookies

• Session– Each visit to a Web page by a user

• Cookie– Text file that stores data from a user’s interaction

with a specific Web site– Persistent

• Stateless protocol– No way to track information

Understanding Cookies

• Client-side cookie– Initiated by a page coming from a Web server – Created in a browser’s memory

• Server-side cookie – Created and stored on a server using server-side

scripting languages

Types of Cookies

• First-party cookie – Cookie created from the Web site you are visiting

• Third-party cookie* – Cookie created at different Web site and is then

sent to Web site you are currently visiting

*Check and comply with the current legislation regarding handling cookies

Customized Cookie Settings in Internet Explorer

Creating a Cookie

• Syntaxdocument.cookie = "name = value; expires = expiration; path = path;

domain = domain; secure";

Cookie Attributes

The name and value Properties

• Each cookie stores– Single piece of information as its value, which is

paired with a name when cookie is created

• Dynamically generating parameters for cookie

username = document.form1.uname.value;

document.cookie = "input1 = "+username;

The expires Property

• Cookie – Can be assigned an expiration date

• To assign expiration dateexpires = Day, DD-Mmm-YY HH:MM:SS GMT

• Per session cookie – Exists only for as long as the browser is

communicating with the Web site

The path Property

• By default– Cookie available only to page where it originated

• path attribute– Used to set the pages to which a cookie is

available

The domain Property

• Used to specify – URL of domain to which you want to make cookie

available

• If no value is specified for domain property– Its value is set to the server of origin

The secure Property

• The final property you can set for a cookie• Enables you to specify that

– Cookie is to be transmitted over the HTTPS protocol

• To set a cookie as a secure cookie– Add the parameter “secure” without a value

Populating Form Fields with Cookie Values

• Assigning value of user variable to username field

function retrieveAccount() {

document.login.username.value=user;

}

Using Cookie Values to Create a Personalized Greeting

• Code to personalize the home page<script type="text/javascript">if((fn != "")&&(ln != "")){document.write("Hello, "+fn+" "+ln+". ")}</script>

Deleting Cookies

• To control deletion of cookies– Set date and time you want cookie deleted– Develop function that deletes cookie when it is

called