Module -4

What is cookies?
In JavaScript, cookies are small pieces of data that are stored on the user's
browser. These cookies are often used for tracking, storing session
information, user preferences, and other data that needs to persist across
different pages or sessions. JavaScript provides simple methods to work with
cookies.

A cookie is an amount of information that persists between a server-side and a

client-side. A web browser stores this information at the time of browsing.

Basic Cookie Operations in JavaScript:

1. Setting a Cookie: To set a cookie in JavaScript, you can assign a string to
document.cookie. This string should include the key-value pair and other
optional parameters such as expiration time, path, and domain.
// Set a cookie with key "user" and value "JohnDoe"

document.cookie = "user=JohnDoe";

Setting a Cookie with Expiration: You can specify the expiration date of a
cookie. If the expires attribute is not set, the cookie will expire when the
session ends (i.e., when the user closes the browser).
// Set a cookie that expires in 1 day
const expires = new Date();
expires.setTime(expires.getTime() + (24 * 60 * 60 * 1000)); // 1 day in
milliseconds
document.cookie = "user=JohnDoe; expires=" + expires.toUTCString();

Setting a Cookie with Path and Domain: You can specify a path for which the
cookie is valid. By default, cookies are only available to the page that created
them, but you can extend the scope with the path attribute.
document.cookie = "user=JohnDoe; path=/; expires=" + expires.toUTCString();

you can also set the domain attribute to specify for which domains the cookie
is available.
Reading a Cookie: To read a cookie, you can simply access document.cookie.
However, document.cookie returns all cookies in a single string. You'll need to
parse it manually.
// Function to get a cookie value by name

function getCookie(name) {

const value = `; ${document.cookie}`;

const parts = value.split(`; ${name}=`);

if (parts.length === 2) return parts.pop().split(';').shift();

// Get the "user" cookie value

const user = getCookie('user');

console.log(user); // Output: JohnDoe

Deleting a Cookie: To delete a cookie, set its expiration date to a past date.
This effectively invalidates the cookie.

// Delete the "user" cookie by setting its expiration date to the past

document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Example Code:

// Set a cookie

function setCookie(name, value, days) {

const expires = new Date();

 expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); // Convert
days to milliseconds

document.cookie = `${name}=${value}; expires=${expires.toUTCString()};

path=/`;

// Get a cookie

function getCookie(name) {

const value = `; ${document.cookie}`;

const parts = value.split(`; ${name}=`);

if (parts.length === 2) return parts.pop().split(';').shift();

// Delete a cookie

function deleteCookie(name) {

document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;

path=/`;

// Example usage

setCookie("username", "JohnDoe", 7); // Set "username" cookie for 7 days

console.log(getCookie("username")); // Read the "username" cookie

deleteCookie("username"); // Delete the "username" cookie

Notes:
 Cookie Size: Cookies are limited in size (about 4KB per cookie).
  Security: Be cautious with sensitive data in cookies, as they can be
intercepted by malicious users if not secured.
 SameSite Cookies: You can control cross-site request handling using the
SameSite attribute to prevent CSRF attacks.

 Here’s a simple guide to create, read, write, and delete cookies

using JavaScript. Each of these functions works by interacting
with document.cookie.
 1. Create (Set) a Cookie:

 To set a cookie, you can use the document.cookie property. A

cookie can have a name, value, expiration date, path, domain,
and security flags.
 2. Read a Cookie:

 To read a cookie, we need to access document.cookie. However,

this returns a string of all cookies, so we'll need a helper
function to extract the value of a specific cookie.
 3. Delete a Cookie:

 To delete a cookie, you can set its expiration date to a past

date, which will cause the browser to discard it.
 Complete Example with Functions for Setting, Getting, and
Deleting Cookies:
// Function to create (set) a cookie

function setCookie(name, value, days) {

const expires = new Date();

expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); // Set

expiration time (in milliseconds)

document.cookie = `${name}=${value}; expires=${expires.toUTCString()};

path=/`;
}

// Function to read a cookie value

function getCookie(name) {

const value = `; ${document.cookie}`; // Adding ; to avoid issues at the start

of the cookie string

const parts = value.split(`; ${name}=`); // Split cookie by the given name

if (parts.length === 2) return parts.pop().split(';').shift(); // Return the cookie

value

return null; // Return null if cookie not found

// Function to delete a cookie

function deleteCookie(name) {

document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;

path=/`; // Set expiration to a past date

// Example usage

// Create (Set) a cookie named "user" with value "JohnDoe" for 7 days

setCookie('user', 'JohnDoe', 7);

// Read the cookie value

console.log(getCookie('user')); // Output: JohnDoe

// Delete the cookie named "user"

deleteCookie('user');

// Try to read the cookie again after deleting it

console.log(getCookie('user')); // Output: null

 Setting a Cookie (setCookie function):
 This function sets a cookie with the given name, value, and an optional
expiration time in days.
 The expiration date is calculated by adding the specified number of days
to the current time.
 The cookie is set with the path=/ attribute to make it accessible across
the entire domain.
 Reading a Cookie (getCookie function):
 The getCookie function looks for a specific cookie by name and returns
its value.
 If the cookie is not found, it returns null.
 Deleting a Cookie (deleteCookie function):
 To delete a cookie, we set the cookie's expiration date to a date in the
past (Thu, 01 Jan 1970 00:00:00 UTC).
 The path=/ attribute ensures that the cookie is deleted across the entire
domain.
Notes:
 Cookies are limited in size (about 4KB per cookie).
 Cookies without an expires or max-age attribute will expire when the
browser session ends.
  If you don’t specify the path or domain, cookies are by default available
to the page that set them.

Browser :
 In JavaScript, you can interact with the browser window by opening new
windows, giving them focus, setting their position, changing their
content, and closing them. Below is an example that demonstrates these
tasks:
 1. Opening a New Window

 You can use the window.open() method to open a new window. This
method takes several parameters to control the window's
characteristics.
 2. Giving the Window Focus

 Once the new window is opened, you can use the focus() method to give
the window focus.
 3. Changing the Window's Position

 You can control the position of the new window by using the
window.moveTo() method. This method allows you to specify the x and y
coordinates of the window.
 4. Changing the Content of the Window

 You can access the content of the new window and modify it by using
document.write() or other DOM manipulation methods.
 5. Closing the Window

 To close the window, you can use the window.close() method.

 Here's a complete example to demonstrate all of these actions:

// 1. Opening a new window

let newWindow = window.open("", "newWindow", "width=500,height=500");

// 2. Giving the window focus

newWindow.focus();
// 3. Changing the position of the window

newWindow.moveTo(100, 100); // Move the window to x=100, y=100 position

on the screen

// 4. Changing the content of the window

newWindow.document.write("<h1>Welcome to the New Window</h1>");

newWindow.document.write("<p>This is some dynamic content in the new

window.</p>");

// Add a button in the new window to close it

newWindow.document.write('<button onclick="window.close()">Close
Window</button>');

// 5. Closing the window after 5 seconds (you can manually close it too)

setTimeout(() => {

newWindow.close();

}, 5000); // The window will automatically close after 5 seconds

Explanation:

1. Opening a New Window:

o window.open("", "newWindow", "width=500,height=500") opens

a new window with no content (empty string) and sets its width to
500px and height to 500px.
 o The second parameter ("newWindow") is the name of the window
(this is optional but can be useful if you want to refer to it later).

2. Giving Focus to the Window:

o newWindow.focus() gives the newly opened window focus,

meaning it will come to the front if it isn't already active.

3. Changing the Position:

o newWindow.moveTo(100, 100) moves the window to the position

(x=100, y=100) on the screen.

4. Changing the Content:

o newWindow.document.write("<h1>...</h1>") writes HTML

content to the new window.

o We also added a button with an onclick event to allow the user to

close the window manually.

5. Closing the Window:

o newWindow.close() is called inside a setTimeout to automatically

close the window after 5 seconds. You can also call window.close()
manually by triggering the button action in the new window.

Important Notes:

 Popup Blockers: Most modern browsers block popups or windows

opened without user interaction. You may need to ensure the new
window is triggered by an action like a button click.

 Window Features: When opening a window, you can specify additional

features in the third argument of window.open(), such as resizable,
scrollbars, toolbar, and others. Example:

let newWindow = window.open("", "newWindow",

"width=500,height=500,resizable,scrollbars");