JavaScript Cookies

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss
1. What are cookies and why are they needed
2. How to write a cookie and read it later

Why are cookies needed
Web applications work on HTTP protocol which is a stateless protocol. This means after the web server has processed the client request for a web page, the web server will not remember anything about the client that made the request. Let us understand what this statement means with an example.

1. Design a web page with a DropDownList.

2. When the user selects a color from the DropDownList we want to change the background color of the page to the selected color.

3. We want the web application to remember the user's preferred color. On a subsequent visit to the same page it should display the page with the background color that we previously selected.

4. Now close the browser. Open a new instance of the browser and navigate to the same page. Notice that, the page does not remember the color we selected earlier. This is because web applications work on HTTP protocol which is a stateless protocol. This means after the web server has processed the initial client request, it does not remember aynthing about the settings the client made. There are several ways to make a web application remember these settings. One of the easiest and common ways is by using cookies.

What are cookies
Cookies are small text files that a browser stores in the visitor's computer. A cookie is basically a string of name-value pairs separated by semi-colons.

How does a cookie look
color=red;expires=Fri, 5 Aug 2016 01:00:00 UTC;

In the cookie string above we have 2 name-value pairs.
The expires attribute specifies when the cookie is going to expire. By default cookies are deleted when the current browser session ends. If you want to store the cookie on the client computer even after the browser session has ended then specify either expires or max-age attributes. The color attribute is set to "red".

How to write a cookie : Use the document object's cookie property to write the cookie.

How to read a cookie : Use the document object's cookie property to read the cookie.

Here is the complete example which remembers the user color preference
[select id="ddlTheme" onchange="setColorCookie()"]
[option value="Select Color"]Select Color[/option]
[option value="red"]Red[/option]
[option value="green"]Green[/option]
[option value="blue"]Blue[/option]
[/select]
[script type="text/javascript"]
{
}
}

function setColorCookie()
{
if (selectedValue != "Select Color")
{
}
}
[/script]

[shaishavgarg]

Couldn't be explained better than this. Excellent Work!!!

[theodorepaul]

Couldn't be explained better than this. Excellent Work!! Wonderfl 100/100

[wilfredomendez]

Clear, concise and to the point, excellent tut.

[jitujahagirdar]

wow your so genius..!
I saw your profile. I want to stand beside you as compare to knowledge..!

[kasramy]

Thank you very much dear Kudvenkat for your beautiful tutorials about javascript, SQL, Jquery, ...I really appreciate for that. 
Best Regards

[juniordin]

clear, practical and Excellent tutorial !

[iliyasmohammed]

clearly explained. Thankyou kudvenkat. Keep making like this

[Jdb]

Wouldn't local storage be better for a task like this?

[aarondv]

Great, Thanks.

One thing that came up is when I ran the code in VS-IDE the cookie was placed and read,
When I copied and made another HTML document with NotePadd++ the Cookie didn't work...

[NehaKumari-syos]

Nice Explanation, but my question is I tried the same example but i am not able to get the output properly. Can you let me know do we need to add some additional file or folder or anything to run cookie examples. I am working in notepad++. Please help me out in this.

thanks

[supriyochowdhury]

Cristal clear tutorial. Love that❤️❤️❤️

[kathleenbraden]

Great explanation! Well put together video, thank you. I have liked and subscribed.

[ihorfedorchuk]

Дуже добий урок, як і інші уроки цього автора.

[gcecg]

Great video. But as others have pointed out, it apparently only works for IE and Edge. I tried implementing the adjustments suggested for Chrome and Firefox, but they don't fix it. Firefox treats the cookie as a session cookie, while Chrome doesn't even remember it when I refresh. Too bad the browsers can't be a bit more consistent.

[djmj]

How do you retrieve the value stored in a _specific_ cookie?

[sunithsaga]

NIce tutorial, Could you please share any thoughts how to add the different domain in https protocol using javascript.

[AbhiAbhi-wusb]

Would you please ma a play list for JavaScript as well. It hard to find out you JS tutorial

[techenum]

When we want to do multi-language we prefer this way?

[Devnikakiduniya]

this is working properly on internet explorer but not working in google chrome. why??
When i put my code in if condition my code like


// Window onload Function start
window.onload = function() {
// alert("Hi I am Coockie");
if (document.cookie.length !=0) {
// alert("Hello Cookie");
var nameValueArray = document.cookie.split("=");
document.bgColor = nameValueArray[1]; = nameValueArray[1]; }
};


it is not working any browser. why can you explain

but when i put if (document.cookie.length > 0) {

then its worked.

[sushmasharma]

Sir I am unable to save a cookie using document.cookie while my alert box is working. I am writing my code like this
hidespin.onclick = function() {
= "none";
var i =1;
setcookie();
};
// cookie
function setcookie(){
//document.cookie = "firstName=Christopher";
setTimeout(function(){
alert("hii");
alert(document.cookie);

}, 5000);
}