JavaScript Cookies
Cookies are exposed as the cookie property of the
Document object. This property is both readable and
writeable.
You can see Cookies in Google Chrome by following
chrome://settings/content/cookies
Creating Cookies
When you assign a string to document.cookie, the browser parses it as a cookie and adds it to its list of cookies.
There are several parts to each cookies, many of them optional.
Syntax: -
document.cookie = “name=value”;
document.cookie = “name=value; expires=date; domain=domain; path=path; secure”;
document.cookie = “name=value; max-age=inSecond; domain=domain; path=path; secure”;
Ex:-
document.cookie = “username=geeky”;
document.cookie = “username=geeky; expires=Monday, 3-Sep-2018 09:00:00 UTC”;
document.cookie = “username=geeky; max-age=”+60*60*24*10;
Note - name-value pair must not contain any whitespace character, Commas or semicolons.
Ex: - username=geeky shows;
Creating Cookies
Optional Cookies Attribute:-
max-age
expires
domain
path
secure
Whenever you omit the optional cookie fields, the browser fills them in automatically with
reasonable defaults.
max-age
It is used to create persistent cookie. It is supported by all modern browsers except IE.
Type of cookies: -
• Session Cookies – Cookies that are set without the expires/max-age field are called
session cookies. It is destroyed when the user quits the browser.
• Persistent Cookies – The browser keeps it up until their expiration date is reached.
Ex:-
document.cookie = “username=geeky; max-age=" + 60 * 60 * 24 * 10;
document.cookie = “username=geeky; max-age=" + 60 * 60 * 24 * 10 + “; path=/”;
expires
It is used to create persistent cookie.
Type of cookies: -
• Session Cookies – Cookies that are set without the expires/max-age field are called
session cookies. It is destroyed when the user quits the browser.
• Persistent Cookies – The browser keeps it up until their expiration date is reached.
Ex:- document.cookie = “username=geeky; expires=Monday, 3-Sep-2018 09:00:00
UTC”;
domain
It specifies the domain for which the cookie is valid. If not specified, this
defaults to the host portion of the current document location. If a domain is
specified, subdomains are always included.
Ex: - document.cookie = “username=geeky; domain=geekyshows.com”;
note.geekyshows.com
code.geekyshows.com
Ex: - document.cookie = “username=geeky; domain=code.geekyshows.com”;
path
Path can be / (root) or /mydir (directory). If not specified, defaults to the
current path of the current document location, as well as its descendants.
Ex: - document.cookie = “username=geeky; path=/”;
Ex: - document.cookie = “username=geeky; path=/home”;
secure
Cookie to only be transmitted over secure protocol as https. Before Chrome
52, this flag could appear with cookies from http domains.
Ex: - document.cookie = “username=geeky; secure”;
Replace/Append Cookies
When we assign a new cookie value to document.cookie, the current cookie are not
replaced. The new cookie is parsed and its name-value pair is appended to the list. The
exception is when you assign a new cookie with the same name (and same domain and
path, if they exist) as a cookie that already exists. In this case the old value is replaced
with the new.
• Ex: - document.cookie = “username=geeky”
Replace
document.cookie = “username=shows”
• Ex: - document.cookie = “username=geeky”
document.cookie= “userid=geek1” Append
Reading Cookie
We can read cookies by document.cookie. The problem occurs when we need
the specific part of cookie to perform some action.
document.cookie = “name=geeky;
document.cookie = “
[email protected]”;
document.cookie = “language=hindi”;
alert(document.cookie);
Deleting Cookies
A cookie is deleted by setting a cookie with the same name (and domain and path, if
they were set) with an expiration date in the past and if using max-age then must set a
negative value.
Ex: -
document.cookie = “username=geeky; expires=Monday, 3-Sep-2018 09:00:00 UTC”;
document.cookie = “username=geeky; expires=Thu, 01-Jan-1970 00:00:01 GMT”;
document.cookie = “username=geeky; max-age=" + 60 * 60 * 24 * 10;
document.cookie = “username=geeky; max-age=-60";
document.cookie = “username”;
document.cookie = “username; expires=Thu, 01-Jan-1970 00:00:01 GMT”;
Updating Cookies
A cookie is possible to update by setting new value to a cookie
with the same name.
Ex: -
document.cookie = “username=geeky”;
document.cookie = “username=shows”;
Cookies Security Issues
• Can misuse Client Details
• Can track User
• Client Can Delete Cookies
• Client can Manipulate Cookies
Cookies Limitation
• Support HTML4 / HTML 5
• Each cookie can contain 4kb Data
• Cookies can be stored in Browser and server
• It is sent with each request
