Cookies in JavaScript| JavaScript Tutorial in Hindi #68
Cookies in JavaScript| JavaScript Tutorial in Hindi #68
Link to the Repl - https://replit.com/@codewithharry/68J…
Join Replit - https://join.replit.com/CodeWithHarry
Download Notes - https://drive.google.com/drive/folder…
Ultimate JS Course Playlist: • JavaScript Tutorials for Beginners in…
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr]: • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr]: • Python Programming Course in Hindi (A…
Python[1 Hr]: • Learn Python In Hindi In One Video - …
Python[2 Hr]: • Python Tutorial In Hindi 🔥
Python[15 Min]: • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr]: • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr]: • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min]: • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr]: • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr]: • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr]: • How To Make a WordPress Website | Wor…
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial using Python an…
MongoDB[2 Hr]: • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr]: • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr]: • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr]: • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React: • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java: • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django: • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo: • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular): https://www.codewithharry.com
►Facebook: https://www.facebook.com/CodeWithHarry
►Instagram: https://www.instagram.com/codewithharry/
Twitter: https://twitter.com/CodeWithHarry
Comment “#HarryBhai” if you read this 😉😉
Content
0.273 -> You go to any website
1.45 -> and you are asked if you would like to accept cookies
4.948 -> and you also accept
6.678 -> How do these JavaScript cookies work
8.69 -> how can you feed someone
10.392 -> that is, how can you set a cookie in someone's browser?
13.061 -> I will tell you that too
14.48 -> Let's go to the computer screen
16.137 -> And let's get started
23.374 -> So today we will talk about JavaScript cookies
26.177 -> and first of all, I want to tell you what cookies are
29.418 -> and in the notes, I have written
30.671 -> Cookies are small strings of data stored directly in the browser
33.144 -> So, cookies are used to store
36.225 -> the data directly inside the browser
37.995 -> i.e., I want to store it as your username harry, ok
42.692 -> so, your username is harry
44.018 -> i can use cookies to store it
47.119 -> i will get all the cookies if i alert document.cookie
51.363 -> If I go to inspect in my browser
53.583 -> and alert
55.141 -> here I will write alert(document.cookie)
59.854 -> so, you look here I will find all the cookies that are there
62.533 -> You see, I got all the cookies here
64.876 -> so, it's a cookie from Google Analytics
67.391 -> See, key = value and separated by semi-colon, ok
71.578 -> you see I got it all
73.027 -> __stripe_mid, i got this
75.083 -> after that hubspotutk, this s a cookie, i got this
78.819 -> ajs_user_id this cookie i got this
80.919 -> I've got all these cookies
82.539 -> Key value pairs separated by a dash
85.794 -> Ok
86.56 -> Key value pairs, ok
88.835 -> I hope you understand what I'm saying
90.923 -> Now here
92.305 -> In JavaScript, document.cookie provides access to cookies
94.451 -> I just told you, okay
96.313 -> Cookies are set by a web server
98.157 -> using the set cookie HTTP- header
99.914 -> Now look what happens
100.778 -> when you make a request on this web server
103.42 -> So, what will happen
104.334 -> that web server will send you the data in response, okay?
108.22 -> And what it can do
109.799 -> a cookie inside you
111.74 -> which means the browser can put a cookie inside it
114.633 -> by using this header
117.234 -> It will do a header called set cookie
119.048 -> it will say set cookie
120.348 -> and with this header it will set the cookie in your browser.
123.725 -> Next time when you send a request to the same server
127.006 -> then what will happen
128.201 -> that your browser will automatically send that cookie
131.407 -> by putting it inside HTTP-header, ok
135.198 -> So, what will happen
136.048 -> that this server will know
137.511 -> that who is that client
139.188 -> like let's say I give a unique id to each client.
142 -> Suppose I give 1 to the first client that comes to me
144.482 -> 2 to the second client
145.884 -> So, if I have a web server
147.629 -> then I will give 1 with the help of set cookie first to the client
151.371 -> then after that
152.566 -> I will give 2 to the second client with the help of set cookie
155.398 -> Next time who is the second client
157.116 -> whom I have given 2 Id
158.829 -> what will I do when he sends me the request
161.266 -> I will read the cookie HTTP-header
163.366 -> Inside the cookie HTTP-header
165.072 -> i will find the cookie mine which i set
167.904 -> This way, I will be able to identify the uniquely client
170.855 -> you will get key = value pairs by doing alert(document.cookie)
174.225 -> delimited by a;
175.839 -> What's the point of that, delimited by a ;
178.139 -> the individual cookies are separated by a semi-colon, ok
182.224 -> ;, ;, ;, ;, ;
185.004 -> Look at here, key = values;
186.97 -> key = values;
189.012 -> that's how your cookies are separated
190.939 -> You can have more than one cookie on one page
194.172 -> now you have to set your own cookie
195.938 -> now suppose I want to set my cookie on replit page
199.026 -> Suppose that is, name = harry, ok
202.3 -> So, what can I do
203.116 -> what can I say
203.847 -> document.cookie =
206.829 -> and what will I do
207.426 -> I will write
207.926 -> "name=harry9900" suppose
212.884 -> now many of you will think
214.034 -> that by doing this all the cookies will be gone
215.884 -> Because we've written in the cookies
217.725 -> and I would say a human intuition
219.082 -> a human JavaScript intuition
220.688 -> a JavaScript developer's human intuition
223.777 -> It will say what happened
226.382 -> you blew all the cookies
228.149 -> but to your surprise
229.081 -> I have not blown all the cookies
230.787 -> Simply all cookies are available, just I have added cookie
234.359 -> which is a special property of document.cookie
236.921 -> that If you write something on it
240.094 -> then it does not disappear
241.371 -> what does it do
242.29 -> it adds it
243.421 -> so, to understand this thing
244.672 -> And to preserve this thing in code, in replit
248.422 -> I will write code
249.667 -> so that you can see it later, and you can appreciate it
252.742 -> So, i will write here, console.log(document.cookie)
256.959 -> and after doing that what i will do
258.958 -> I will write here
260.495 -> console.log(document.cookie)
265.603 -> And what will I do between these two
267.026 -> I will write
269.668 -> not cocument
270.757 -> document.cookie =
273.799 -> and what i will do in document.cookie
276.803 -> I write "name=harry1122334400", ok
282.678 -> I'll do this thing
284.363 -> and now if I open up my console and show you and reload it
288.08 -> so, you'll see it here
289.891 -> do normal reload
291.414 -> What it is When I printed document.cookie I got name=this
297.044 -> now this is the only cookie on this page
299.254 -> So let me show you one thing
300.579 -> name=harry will done
301.853 -> name:2=
302.933 -> let me do a 2 here
304.023 -> so, it looks like it will set this cookie first
305.992 -> and after that it will overwrite all the cookies
307.761 -> but it will not happen
309.23 -> why
309.937 -> because what happens when we write on document. cookie
314.85 -> our cookies are added, ok
316.715 -> not all of the cookies that are there are replaced by all of us
319.158 -> no, it does not happen
319.897 -> cookies do not replace all of them
321.415 -> Cookies are added to us, ok
323.402 -> so, you should know this thing
325.474 -> one thing is that the cookie
327.152 -> So, an assignment to document.cookie
328.982 -> is treated specially in a way
330.566 -> that a write operation doesn't touch other cookies
333.635 -> Doesn't touch other cookie write operation, ok
336.531 -> it updates only cookie named harry
338.977 -> sorry, value of username harry
341.668 -> harry the value of the cookie named username, ok
345.459 -> what will it do
345.959 -> harry the value of the cookie named username
349.287 -> will update
350.365 -> Well, if I do something like this
351.973 -> that is, I have done this to name2 first
353.85 -> now I just change the name to harry
356.747 -> then what will be another key add
358.039 -> Or this cookie will be updated
359.93 -> this cookie will be updated, you need this thing
363.001 -> So, if I'll do document.cookie after that
365.737 -> it's got this cookie that name=this
368.113 -> it's replaced with name=harry, ok
370.733 -> You should know this thing
372.235 -> in a way the key is a value pair
373.882 -> think of it as a big simple database
375.713 -> if I say it in very layman's terms
377.863 -> It would be a big joke to call it a database
379.984 -> but I am saying in a layman's terms, ok
382.263 -> a way to store data.
384.386 -> A very small,
386.415 -> I would say very simple database, ok
389.068 -> it is not a database
390.612 -> it is not
391.118 -> I am telling you in an intuitive way.
393.671 -> That's a very small way to store data
396.449 -> a database is a different thing
397.638 -> It's not a database, it's okay
399.089 -> a cookie is just a way to store data, ok
402.402 -> Come on great
403.966 -> now you have to go to twitter.com and print all the cookies
408 -> you must do this, ok
410.784 -> go to twitter.com and print all cookies
414.38 -> how to print all cookies
415.817 -> very simple
417.023 -> no need to even console.log
420.123 -> Only write document.cookie, that's about it, ok
423.928 -> If you write this, you will get to see all your cookies here
428.048 -> Ok
428.953 -> Cool
430.527 -> now I want to tell you about a function
433.067 -> that is encode, this component
435.164 -> Let's say I have the key to a cookie, ok
440.745 -> and one I have the value, ok
443.253 -> let's say I'm asked
445.476 -> let key = prompt
450.273 -> and I'm asked
451.193 -> ("enter your key"), ok
453.464 -> Then after this I am asked to tell your value
459.377 -> that what value do you want to store
461.597 -> and after that simple thing what we will do
463.247 -> inside document.because
464.866 -> i will use backticks,
468.084 -> template lateral
469.961 -> And what I'll write here
471.425 -> I will write
472.395 -> $(key)
475.739 -> and then what I'll write here
479.023 -> ${value}
481.096 -> Ok
482.22 -> key = value, a simple thing i wrote here
485.844 -> So now if I reload this page, it will ask me what key is tell me
489.776 -> as if I wrote that my key is albert, ok
494.769 -> And after this asks you tell me your value
498.35 -> einstein, ok
501.165 -> albert=einstein has been added to my cookie
503.424 -> But if I do this work by using some special character to it
506.989 -> as if I do something like this
508.672 -> I have said, I have said that this is my key
511.364 -> and this is my value.
513.9 -> So, what happened here
515.074 -> wrong happened
516.094 -> what wrong happened
517.356 -> the problem was
518.474 -> that it could not set my key value pair, you saw it
522.734 -> I'll show you one more time
524.49 -> look name=harry, albert=einstein happened
527.822 -> name=harry
529.527 -> as soon as I put a semi-colon here it became a problem.
532.24 -> Look, here I wrote
533.29 -> let's say I write this uyu;
537.239 -> and after that I write =1, okay
540.78 -> So uyu has come
542.128 -> forgot all this spice after the semi-colon
545 -> so, we have a function to solve this thing
549.779 -> encodeURIComponent, ok
552.14 -> What does encodeURIComponent do
554.303 -> that is take any string
558.697 -> component
560.337 -> and after doing this
566.893 -> see if I write here (a;;)
569.443 -> and then write the value 67
571.793 -> So, look what it did
573.938 -> It encoded it
576.089 -> in a way that I can decode it, ok
579.008 -> now how do I decode it
580.644 -> I will decode it something like this
582.996 -> by using decodeURIComponent function
585.873 -> so, encode then you should come, decode should also come
588.833 -> After decoding it will come, What I wrote
590.823 -> (a;;)
591.864 -> you see, what a wonderful thing
593.775 -> The question of many people remains
595.814 -> that what you have separated with a semi-colon
599.311 -> that is, you separate cookies with a semi-colon.
601.384 -> And this (=) also happens
602.832 -> In this, if (=) happens in our key
605.152 -> if (=) happens in your key
607.013 -> like let's say I keep the key (1==)
609.943 -> and keep the value for harry.
611.685 -> So, my (1==) look here is the key
614.125 -> now I will decode it using decodeURIComponent
619.15 -> will decode it by using decodeURIComponent
625.003 -> 1==, ok
626.318 -> But if I could have put row without using this function
629.534 -> to encodeURIComponent
631.708 -> then it would not have encoded
633.038 -> and here I would have got such an error in my syntax
635.027 -> that my entire cookie is not set correctly, ok
638.85 -> So, you must have understood this thing
640.855 -> This way these special characters are encoded
643.031 -> just like you, just saw, ok
645.45 -> now let's talk about cookie options.
647.376 -> Cookies have several options
649.088 -> which can be provided after key = value
651.334 -> to a set call like this
653.275 -> That is, the set call of cookie is called set call
655.897 -> document.cookie =, this is a set call
659.519 -> this is a set call
660.679 -> name=harry you typed but name you set harry
663.254 -> it is also a set call, ok
664.878 -> So, this set call you have been able to give options
666.744 -> by putting semi-colon
667.813 -> now you don't think that it will set more than 1 cookie, no
670.904 -> you don't think so
672.075 -> document.cookie = When we write this
674.8 -> then this semi-colon is delimited
676.898 -> but it is not that different cookies are being set
678.627 -> it is being set the same cookie with different options
680.694 -> It's a little confusing in cookies
683.137 -> it seems to people
684.601 -> and I'll clear your confusion right now
686.09 -> no problem
688.028 -> A lot of people think document.cookie = writing this
691.149 -> will set multiple cookies
692.192 -> but no, it won't.
693.677 -> That is, if I write something like here
695.408 -> I print in document.cookie
697.466 -> it will see all the cookies here
699.056 -> now i write, document.cookie = "1= 2; 3 = 4"
708.925 -> if I try to set more than one cookie
711.319 -> After that I will do document.cookie
713.138 -> then (3=4) will be ignored
714.877 -> you see, only (1=2) is set
716.86 -> so, you can't set more than one cookie like this
719.204 -> Do not think this
720.418 -> Rather if you try to do something like this
723 -> then (1=2) will be set
724.87 -> the rest are all the options
726.383 -> what is, these are all the options
728.055 -> And the options are what you have
730.977 -> you can use what this option is
733.25 -> you can use the path,
734.723 -> you can use the expires
736.65 -> Then when is expiring
737.8 -> now what will happen from the path
739.02 -> that will make the cookie available (/a), (/a/b), (/a/dashboard)
745.205 -> then it will make it available on all such pages
747.195 -> if you have written here path = /a
749.473 -> So, it won't make it available on (/b)
751.043 -> will make the available on (/a) onwards all the paths coming in
753.772 -> on (/) also
754.978 -> that is, if I set a cookie
757.961 -> by doing path = /notes
761.664 -> and my domain is codewithharry.com
763.749 -> so, cookie will find on codewithharry.com /notes
766.84 -> but would not find on codewithharry.com,
768.467 -> would not find on codewithharry.com/block,
770.679 -> would not find on codewithharry.com/videos
774.005 -> Ok
774.505 -> I hope you understood this point
776.324 -> now it will be found on (/a, /b)
779.566 -> that cookie will be found on (/notes, /dashboard)
782.652 -> So, I can set a particular page onwards cookie
785.392 -> like the dashboard of your site.
787.101 -> it's dashboard is
787.601 -> by doing /dashboard codwwithharry.com/dashboard
790.163 -> let us say
791.076 -> or that dashboard onwards
792.496 -> Let's say dashboard/
794.418 -> Let's say I have a social media, ok
796.802 -> let's say I have a /vlog
798.712 -> /dashboard/vlog
800.428 -> so, there will be cookies available
801.966 -> So, this way I can make the cookie available to the admin
805.913 -> as simple as thta, ok
807.494 -> so, the path option can be set in this way
809.673 -> you can put this type of timestamp by doing expire =
812.611 -> So, you can set the expiration time of it, ok
815.74 -> that when it would be expire
817.202 -> it is a simple thing, ok
818.524 -> If you want this option, you give, if you want, you do not give
820.471 -> it is optional, so their name is option, ok
823.653 -> Now let's take a look at some about notes cookies
825.38 -> before we wrap up
826.985 -> and I'll send you the code
829.438 -> telling you about the options.
831.326 -> The name = value pair, after encodeURIComponent
834.133 -> should not exceed 4KB
835.912 -> There is a limit of 4KB
837.468 -> you can't use more than 4KB data in name=value pair
841.961 -> you have to remember this, ok
843.998 -> Second thing,
845.036 -> Total no. of cookies per domain is listed to around 20+
848.735 -> 21, 22, 23
850.417 -> depends upon the browser, ok
853.34 -> Depends on the browser
854.84 -> that how much is the exact amount
856.186 -> how many cookies
858.001 -> it will allow you to set the browser on a domain
861.734 -> But try and round to 20
863.837 -> use a safe number
864.959 -> set cookies to 15-17, don't do more than that, okay
869.221 -> I hope you have understood this
871.02 -> and this thing is cleared to you, ok
873.675 -> And the exact number it has is browser dependent, ok
876.625 -> so set up the browser
877.731 -> whoever is making the browser decides all these things
880.072 -> So, i hope you enjoyed it,
881.441 -> you understand what this thing is
883.462 -> for now, that's all in this video
885.075 -> Thankyou so much guys for watching this video
887.08 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=sHrwueeeMmY