Client Side Technologies

JavaScript Cookies
 Cookies
What’re cookies?
o Cookies are small text strings that you can store on the computers of
people that visit your Web site.
o Cookies were originally invented by Netscape to give ‘memory‘ to web
servers and browsers.
o Normally, cookies are simple variables set by the server in the browser
and returned to the server every time the browser accesses a page on the
same server.
o Cookie is a method of storing information locally in the browser and
sending it to the server whenever the appropriate pages are requested by
the user.
o A cookie is not a script, it is a mechanism of the HTTP server accessible
by both the client and the server.
o A cookie may be written and accessed by a script but the cookies
themselves are simply passive text strings.
 Cookies (Cont.)
 Why do we need cookies?
o The HTTP protocol, is responsible for:
 arranging the transfer of web pages to your browser and
 browser requests for pages to servers.

o HTTP protocol is a state-less, which means that once the server has sent
a page to a browser requesting it, it doesn't remember a thing about it
o HTTP server has no information in a request to tie it to any other request.
o The data in a response is based only on the information the client sends
in the request.
o So if you come to the same web page a second, third, hundredth or
millionth time, the server once again considers it the very first time you
ever came there.
o Cookies are a method for a server to ask the client to store arbitrary data
for use in future connections “to keep state information”.
 Benefits of Cookies

Benefits of Cookies:
o Shopping carts
 By storing data as you move from one page (or frame) to
another.
o Authentication
 No longer need to enter password
 Greeting people by name.
o Maintaining state
 Adventure games that use cookies to keep track of pertinent
character data and the current state of the game.
o Saving time for returning visitors
 The user does not have to re-enter information
o Notifying visitor
 What has changed since their last visit.
 Cookies Limitations

Cookies Limitations:
o All browsers are required to be able to store at least 300 cookies, after
which automatic deletion based on expiry date and usage.
o Each individual domain name can store 20 cookies.
o each cookie having a maximum size of (4k).
 Security Limitations & Facts
 Cookies security limitations & Facts:
o Highly unreliable, from a programming perspective
 It's like having your data stored on a hard drive that sometimes will
be missing, corrupt, or missing the data you expected.
o Cookies just identify the computer being used not the individual using
the computer.
o A server can set, or deposit, a cookie only if a user visits that particular
site.
 i.e. one domain cannot deposit a cookie for another, and cross-
domain posting is not possible.
o only the originating domain can ever use the contents of your cookie
“Same-origin policy”.
o Any user can choose which cookies to accept by adjusting the settings in
the browser.
Controlling Cookies in the Browser

MSIE
Controlling Cookies in the Browser

Firefox
 Cookies false claims

 Cookies false claims:

o Cookies are like worms and viruses in that they can erase data from the
user's hard disks
o Cookies generate popups
o Cookies are used for spamming
o Cookies are only used for advertising
 Cookies parts

Name-value pair
containing actual
data
Path

Cookie
Expiry Date
after which
it is not valid
Secure

Domain
 Cookies parts (Cont.)

 Name-value pair: This sets both cookies name and its value.
 Domain: This optional value specifies a domain within which
the cookie applies. Only websites in this domain will be able to
retrieve the cookie. Usually this is left blank, meaning that only
the domain that set the cookie can retrieve it.
 Path: This optional value specifies a path within the site to
which the cookies applies. Only documents in this path will be
able to retrieve the cookies. Usually this is left blank, meaning
that only the path that set the cookies can retrieve it.
 Secure: This optional flag indicates that the browser should use
SSL when sending the cookies to the server. This flag is rarely
use.
 Cookies parts (Cont.)

 Expiry date: This optional value set the date that the cookie will expire on.
The date should be in the format returned by toGMTString() method of the
Date object. If the expires value is not given, the cookie will be destroyed the
moment the browser is closed.
o Persistent Cookies These cookies have an expiry date, are stored on a
visitor's hard drive and are read by the visitor's browser each time the
visitor visits the Web site that sent the cookie.

o Session / Non-persistent  A cookie without a valid expiry date will

not be stored on your machine but will reside on the Web browser. They
expire as soon as the visitor closes the Web browser (ie. until you log
off).
 Working with cookies

 How to work with Cookies?

o Cookies can be created, read and deleted by JavaScript,
under these conditions:
 The user’s navigator must be cookie-enabled. This can be
checked using “navigator.cookieEnabled” property .
 The cookie(s) that you set or accept are only accessible at
pages with a matching domain name, matching path.
 The cookies must not have reached or passed their expiry
date.
o When these criteria are met the cookies become available to
JavaScript via the document.cookie property.
 Creating a Cookie

 Creating a Cookie:
o The simplest way to create a cookie is to assign a string
value to the document.cookie.
o Syntax:

document.cookie = "key1=value1;expires=date";

<script language=”JavaScript”>
var myDate = new Date();
Var d= myDate.getDate() +10;
myDate .setDate(d);
document.cookie = “myCookie=” + escape(“This is my Cookie”) +
“;expires=” + myDate.toGMTString();
</script>
 Reading a Cookie

 Reading a Cookie:
o The document.cookie will keep a list of name=value pairs
separated by semicolons, where name is the name of a
cookie and value is its string value.
o We use strings' split() function to break the string into key
and values.
<script>
var newCookie = document.cookie;
var cookieParts = newCookie.split(“=”);
var cookieName = cookieParts[0];
var cookieValue = unescape(cookieParts[1]);
alert(cookieName);
alert(cookieValue);
</script>
 Deleting a Cookie

 Deleting a Cookie:
o If the user logs out or explicitly asks not to save his or her
username in a cookie, hence, you need to delete a cookie to
remove a username cookie.
o Simply reassign the cookie, but set the expiration date to a
time has already passed

<script language=”JavaScript”>
var newDate = new Date();
newDate.setTime(newDate.getDate() - 1);
document.cookie = “myCookie=;expires=“+
newDate.toGMTString();
</script>
 Working with multiple cookies

 Reading multiple Cookie:

o Assign each cookie in turn to the document.cookie object and ensure that
each cookie has a different name, and may have a different expiration
date and time.

 Retrieving multiple Cookie:

o more complicated since accessing document.cookie,there will be a series
of cookies separated by semicolons;

CookieName=firstCookieValue; secondCookieName=secondCookieValue;
Creating a Cookie Function Library

 Creating a Cookie Function Library:

o Working with cookies requires a lot of string and date
manipulation, especially when accessing existing cookies
when multiple cookies have been set.
o To address this, you should create a small cookie function
library for yourself that can:
 create
 access
 delete cookies
without needing to rewrite the code to do this every time.
 Creating a Cookie Function Library (Cont.)

 Creating a Cookie Function Library:

getCookie(cookieName)

o Retrieves a cookie value based on a cookie name.

setCookie(cookieName,cookieValue,expiryDate)

o Sets a cookie based on a cookie name, cookie value, and

expiration date.

deleteCookie(cookieName):
o Deletes a cookie based on a cookie name.
 Self Study

 What’s HTML5 Local storage, and session storage?

 What’s the difference between them and Cookie?
 <script > </script>

<script>document.writeln(“Thank
You!”)</script>