css notes 4
css notes 4
SYLLABUS :
4.1 basic of cookies, reading a cookie value, writing a cookie value, creating a
cookies, deleting a cookies, setting the expiration date ofcookie.
1. storing information :
When user visits to website The basic information such as username and password can be
stored in the cookie.
2. Accessing information :
I) The stored username and password can be accessed by the web browser which is
remembered by the browser in the form of cookie.
II) So, when you come back to the website, the browser can quickly access thesaved details to
make things easier for you.
III) Cookies are saved in the form of name value pair as follows : Username = “student”;
3. Cookie contains following data :
1. A name-value pair
2. An expiry date for that cookie ((how long the cookie will last before it gets deleted)
3. The website/Domain name that created the cookie
Types of cookie :
1. Session cookie :
I) Session cookies are temporary cookies that remember users online activities throughout the
session.
II) I.e It remember the information when a user logged in until logout or when a user close the web
page. when user gets logged out the session cookies get expired.
2. Persistent cooking.
I) A persistent cookie lasts longer because it has an expiration date. It stays saved on your
computer even after you log out or close the browser, until it reaches that expiration date.
II) These cookies are stored in a folder in your browser’s installation files.
III) You can create, read, or delete these cookies using JavaScript through thedocument.cookie
command.
CREATING A COOKIE
document.cookie = “key=value”;
You can also Add an expiry date to the cookie in UTC time format as follows :
II) to create cookie you must have local server means you cannot store cookie when html file is open
Document.cookie = “Username = student; expires = Thu, 4 july 2019 11:30:00
UTC”
with your file explorer folder you must open html file using live server extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>create cooike</title>
<script>
function create_cookie()
{
var cvalue = document.getElementById("mytext").value;
document.cookie = "username="+cvalue;
alert("cookie is created");
document.write(document.cookie)
}
</script>
</head>
<body>
<input type="text" name="mytext" id="mytext">
<input type="button" value="btn" onclick="create_cookie()">
</body>
</html>
Output :
READING AND WRITING A COOKIE VALUE
<html>
<head>
<title>reading and writing a cookie</title>
<script>
function write1()
{
var cookieValue=document.getElementById("mytext").value;
document.cookie ="username="+cookieValue;
alert("write succesfully");
}
function readCookie()
{
var x;
if(document.cookie="")
{
x="";
alert("please enter the username")
}
else
{
x = document.cookie;
alert("all stored cookie are 👉"+x);
}
}
</script>
</head>
<body>
<form action="" name="myform">
Enter the Username : <input type="text" name="mytext" id="mytext" placeholder="enter
the name">
<br><br>
<input type="button" value="write cookie" onclick="write1()">
• If the cookie is temporary cookie then it is automatically deleted when we close the browser.
• If you want to delete temporary cookie without closing the browser then we have to update the expiry
date of the cookie manually to the past date.
• Similarly if the cookie is persistent cooking then we have to update expiry date of the cookie to the past
date.
• In both cases the respective cookies are automatically deleted after expiry date and automatically
deleted by browser.
<html>
<title>deleting cookie</title>
</head>
<body>
<script>
var cookieVal;
function createCookie() {
cookieVal = document.getElementById("username").value;
document.cookie = "Username=" + cookieVal;
alert("cookie is created");
}
function readCookie() {
if (document.cookie = "") {
alert("cookie not found");
}
else {
alert(document.cookie);
}
}
function deletecookie() {
if (document.cookie = "") {
alert(" no cookie found to delete");
}
else {
document.cookie = "Username=" + cookieVal + "; expires=Thu, 24 Oct 2023
00:00:00 UTC";
alert("cookie is deleted");
}
}
</script>
</body>
<form action="" name="myform">
<input type="text" name="username" id="username">
<br>
<input type="button" value="create cookie" onclick="createCookie()"><br>
<input type="button" value="read cookie" onclick="readCookie()"><br>
<input type="button" value="delete cookie" onclick="deletecookie()">
</form>
</html>
Output :
Setting Expiry date of cookie
• We can extend the life of cookie by updating the expiry date of the cookie to the future date .
• This can be done by setting the value of expires property to the new date and time
• The new date object is obtained by using the “new date()” function.
• To access the value of the date following functions are close
A) getMonth() : returns month of current date object.
B) setMonth() : Set’s the month to current date object.
C) toUTCString() : this function formats the expiry date in the standard format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>closing a window</title>
<script>
var a;
function openWindow()
{
a = window.open("","himanshu","width=400 height=400");
a.document.write("himanshu");
}
function closeWindow()
{
a.close();
}
</script>
</head>
<body>
<button onclick="openWindow()">open</button><br><br>
<button onclick="closeWindow()"> closeWindow</button>
</body>
</html>
Output :
Focous () window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>closing a window</title>
<script>
var a;
function openWindow()
{
a = window.open("","himanshu","width=400 height=400");
a.document.write("himanshu");
a.focus();
}
function closeWindow()
{
a.close();
}
</script>
</head>
<body>
<button onclick="openWindow()">open</button><br><br>
<button onclick="closeWindow()"> closeWindow</button>
</body>
</html>
Output :
Same as above
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opening Multiple Window</title>
<script>
var a;
function MultipleWindow() {
for (let i = 0; i <= 5; i++) {
window.open("", "", "left=400 top=400 width=400 height=400");
}
}
</script>
</head>
<body>
<button onclick="MultipleWindow()">opening Multiple window</button>
</body>
</html>
Same as above o/p but multiple window operlap each other ok
<html>
<head>
<title>Document</title>
<script>
function myfun() {
setTimeout(displayfun, 5000); // Wait for 5 seconds before displaying the
alert
}
function displayfun() {
alert("I am Vinayak closing");
}
</script>
</head>
<body>
<input type="button" name="b1" value="Close" onclick="myfun()">
</body>
</html>
<html>
<head>
<title>Document</title>
<script>
function myfun() {
setInterval(displayfun, 5000); // Wait for 5 seconds before displaying the
alert
}
function displayfun() {
alert("I am Vinayak closing");
}
</script>
</head>
<body>
<input type="button" name="b1" value="Close" onclick="myfun()">
</body>
</html> note : programm displays alert box in every 5 sec
function previous() {
window.history.back();
}
function histlen() {
document.getElementById("myid").innerText = "Length of history is " +
history.length;
}
</script>
</head>
<body onload="histlen()">
<input type="button" value="NEXT" onclick="next()"><br>
<input type="button" value="BACK" onclick="previous()"><br>
<div id="myid"></div>
</body>
</html>
Output :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All cookie operation in javascript</title>
<script>
function create()
{
with(document.forms.myform)
{
document.cookie = "username=himanshu";
document.cookie = "name=jadhav";
document.cookie = "std=6th";
alert(document.cookie);
}
}
function read()
{
var readCookie = document.cookie;
alert(readCookie);
}
function deletedCookie()
{
document.cookie = "username=himanshu;expires=Thu, 24 mar 2021 00:00:00 UTC";
alert("cookie is deleted"+document.cookie);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="username" id="username"><br><br>
<input type="button" value="create cookie" onclick="create()"><br>
<input type="button" value="readCookie" onclick="read()"><br>
<input type="button" value="deletecookie" onclick="deletedCookie()"><br>
</form>
</body>
</html>
4.1.2 : Reading a cookie value
<head>
<script>
function readCookie() {
document.cookie = "user = dev";
document.cookie = "pass = dev@333";
let all_cookies = document.cookie;
document.write("ALl cookie = " + all_cookies);
}
</script>
</head>
<body>
<p>Click the following button to get the Cookies:</p>
<input type="button" value="Get cookie" onclick="readCookie()">
</body>
</html>
4.1.3 : Deleting a cookie value