Scribd
Upload
12 views6 pages

CSS Chapter 4 (Part 1) Notes by Ur Engineering Friend

Cookies are small text files stored on a user's device that contain data for personalizing web experiences. They can be categorized as session cookies, which are temporary, and persistent cookies, which remain for a set duration. JavaScript allows for easy creation, reading, and deletion of cookies using the document.cookie property.

Uploaded by

rms744746
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views6 pages

CSS Chapter 4 (Part 1) Notes by Ur Engineering Friend

Cookies are small text files stored on a user's device that contain data for personalizing web experiences. They can be categorized as session cookies, which are temporary, and persistent cookies, which remain for a set duration. JavaScript allows for easy creation, reading, and deletion of cookies using the document.cookie property.

Uploaded by

rms744746
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Client-Side Scripting Notes

Chapter 4 -: Cookies & Browser Data

Define Cookies -:

Cookies are small text files stored on a user's device (such as a computer or smartphone) by
websites. These files contain data such as user preferences, session information, or tracking
information. When a user revisits the website, the cookies are read to remember the user's
actions, preferences, and browsing history. This enables the website to provide a more
personalized experience and helps with functions like logging in automatically or keeping
items in a shopping cart.

Types of Cookies:

Cookies can be classified based on their duration, origin, and purpose:

• Session Cookies:
o These cookies are temporary and are erased when the user closes the web
browser. They store information that is only necessary for a single session, such
as login information or items in a shopping cart.
o Example: A shopping cart cookie that vanishes after you leave the site or close
the browser.

• Persistent Cookies:
o Persistent cookies remain on a user’s device for a predetermined period of time,
even after the browser is closed. These cookies help websites remember user
preferences or actions over multiple sessions.
o Example: Cookies that save login information so that you don’t have to re-enter
your credentials each time you visit the site.
Cookies Operation -:

Creating cookies in JavaScript is simple and can be done using the document.cookie property.
Here's how you can create, read, and delete cookies with a small HTML and JavaScript
example.

Steps to Create Cookies in JavaScript:

1. Creating a Cookie: You can create a cookie by assigning a string to document.cookie.


This string can contain the cookie name, value, and optional attributes like expiry time,
path, domain, and secure flag.
2. Reading a Cookie: You can read all cookies with document.cookie. It returns all
cookies in a single string, separated by semicolons.
3. Deleting a Cookie: To delete a cookie, you can set its expiry date to a past time.

Example: Creating, Reading, and Deleting Cookies in JavaScript

Creating Cookie -:

Key Parts:

• cookieName=cookieValue: The name and value of the cookie.


• expires=expirationDate: The expiration date of the cookie (optional, if not set, the
cookie will expire when the browser is closed).
• path=/: Defines the path where the cookie is accessible (optional, default is the current
page).
Reading Cookie -:

In JavaScript, you can read cookies using the document.cookie property. The document.cookie
string contains all the cookies for the current page. However, since all cookies are stored in a single
string separated by semicolons, you will need to parse them to get individual cookie values.

Deleting Cookie -:

Cookies in JavaScript are stored in the document.cookie property. Deleting a cookie is done by
setting the cookie's expiration date to a past time.

Simple program for Cookie

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Cookie Management Form</title>

<script>

// Function to create a cookie with the user's input name

function createCookie() {

const name =

document.getElementById("nameInput").value;

if (name !== "") {

const date = new Date();


date.setTime(date.getTime() + (7 * 24 * 60 * 60 *

1000)); // Cookie expires in 7 days

const expires = "expires=" + date.toUTCString();

document.cookie = "username=" + name + "; " +

expires + "; path=/";

alert("Cookie created for: " + name);

} else {

alert("Please enter a name before creating a

cookie.");

// Function to read the cookie and display the value

function readCookie() {

const nameEQ = "username=";

const cookies = document.cookie.split(';');

for (let i = 0; i < cookies.length; i++) {

let cookie = cookies[i].trim();

if (cookie.indexOf(nameEQ) === 0) {

const username =

cookie.substring(nameEQ.length, cookie.length);

alert("Cookie found! Username: " + username);


return;

alert("No cookie found.");

// Function to delete the cookie by setting its expiration

date to the past

function deleteCookie() {

document.cookie = "username=; expires=Thu, 01 Jan 1970

00:00:00 UTC; path=/;";

alert("Cookie deleted.");

</script>

</head>

<body>

<h1>Simple Form with Cookie Management</h1>

<!-- Form to take user's name as input -->

<label for="nameInput">Enter your name:</label>

<input type="text" id="nameInput" placeholder="Enter your

name">
<br><br>

<!-- Button to create a cookie -->

<button onclick="createCookie()">Create Cookie</button>

<!-- Button to read the cookie -->

<button onclick="readCookie()">Read Cookie</button>

<!-- Button to delete the cookie -->

<button onclick="deleteCookie()">Delete Cookie</button>

</body>

</html>

You might also like