localStorage & related methods | JavaScript Tutorial in Hindi #69
localStorage & related methods | JavaScript Tutorial in Hindi #69
Link to the Repl - https://replit.com/@codewithharry/69l…
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.183 -> Today's video is going to be dedicated on local storage
2.643 -> now you must have heard a lot about local storage
5.272 -> Local storage is used to store data in your browser
7.261 -> for a particular domain
11.434 -> I will also tell you how it is different from cookies.
14.417 -> And I will tell you some of its amazing
16.09 -> and straight forward methods
18.546 -> let's go to the computer screen.
20.278 -> And let's get started
27.663 -> So now we are going to talk about local storage
30.672 -> local storage is very close to my heart
32.839 -> because it is use more
34.349 -> And whenever I have to store my data
36.859 -> then I do it in local storage
38.849 -> as if I want to store any one message.
41.712 -> And suppose I want to store any such thing
44.575 -> which I want to remain in the browser
46.067 -> I save in local storage
48.681 -> what is local storage
49.663 -> Let me tell you about this
50.76 -> I have made notes
52.276 -> Local storage is a web storage object
53.986 -> which are not sent to server with each request
57.147 -> if you have set cookies
58.581 -> then browser will send your cookie with every request
63.068 -> You don't want it to be sent with every request sometimes
65.628 -> as if you want to be of any client
69.395 -> that is, you have to save a note of any person
72.858 -> who is accessing your website on any browser
77.04 -> do want you want in browser
79.01 -> you do not want to do in cookie
80.362 -> Why would you not want to do this in a cookie
81.654 -> because you would not want to
83.278 -> because it will be sent with every request
85.132 -> You don't want it to go to the server again and again, ok
88.135 -> that's why you want to use it to local storage
90.763 -> This data server a full page and even a full browser restart
94.953 -> if you saved something to local storage
97.791 -> So even if you restart your browser
100.631 -> even if you refresh your page
103.475 -> your data will not go anywhere
105.162 -> it will be safe in local storage.
107.132 -> Let me show you a simple thing
110.288 -> when you go to the application here
112.745 -> and after that you go to the local storage here
114.691 -> So, you get to see the data of your local storage
117.569 -> it is like a database
118.71 -> they are key value pairs
119.626 -> and key and value are string here, ok
122.918 -> now i will show you by writing a code
125.294 -> localStorage.setItem ("name" , "harry")
136.792 -> I hit enter
138.1 -> I ran this command
138.899 -> and what is this command, how is it, will also see
141 -> I will tell all the commands of local storage
143.23 -> A very basic command is run
144.614 -> which tells what it is doing,
146.229 -> setting the name,
148.806 -> which is my name key
150.18 -> and the value which is harry, this is setting this
153.181 -> Now if I go to the application
154.393 -> then you see here the name harry has been set
156.866 -> I will click on the name
157.779 -> then I will get to see its value here
159.686 -> i can edit it by right click
164.326 -> and i can do many other things
165.913 -> Basically, it is stored
167.828 -> if i refresh it will i get name harry
170.753 -> The answer is Yes, you will get
172.284 -> If I copy this URL
174.024 -> close this URL
175.531 -> and then open this URL again in new tab
178.008 -> will I be able to see it?
179.467 -> The answer is yes, I'll get to see it
181.786 -> you can see it here, name harry, okay
184.065 -> so, it survives your browser restart as well
188.446 -> If you reload the page
189.876 -> it still survives that, we have seen it now
192.148 -> and if you copy the link and open it in new tab
195.431 -> So, it survives that too, ok
198.315 -> These are the method provided by local Storage
200.147 -> we just saw the set item
201.497 -> if I write, localStorage.setItem
203.604 -> or i write here
204.705 -> let key = prompt("Enter key you want to set")
215.09 -> And now I want the user to give me the value as well
221.086 -> Enter value you want to set
223.87 -> Ok
224.992 -> Enter key you ant to set
226.209 -> Enter value you want to set Ok
227.861 -> and i will write here, localStorage.setItem(key, value)
234.06 -> Ok, something like that
236.132 -> localStorage.setItem(key, value)
238.333 -> whatever the key will be set to value, ok
242.514 -> so, I'll show you here
244.106 -> and what i will simply do here
245.184 -> localStorage.getItem(key), ok
254.053 -> whatever you entered key
255.846 -> and I'll do it here in console.log
258.99 -> I'll write the value here.
263.383 -> The value at
265.897 -> and here i am going to use backticks,
268.49 -> So, let's see
269.865 -> I am going to use Backticks here
271.812 -> where do you do JavaScript wherever there is?
278.343 -> There you go
279.457 -> 1 minute, I put it on here ($) by ctrl + x
283.352 -> and then put something like this inside it here, okay
286.231 -> so, i can do this, ok
287.825 -> this is the syntax of template literal big basic thing
289.661 -> that we have covered
291.488 -> now it is asking, Enter key you want to set
293.344 -> Suppose I write city here
296.093 -> and i write here Delhi
297.697 -> and look here city has come to Delhi
299.115 -> and open the console and show it, The value at city is Delhi
301.712 -> Let's say I reload again
303.46 -> and I write key
305.329 -> color
306.112 -> and write red
307.007 -> See, the value at color is red
308.737 -> at this point if I show you my local storage
311.153 -> then all these things persist in it
313.435 -> What does persist mean
314.637 -> persists means it remains, not deleted
317.169 -> even if you reload the page, ok
320.127 -> So, here's the thing
321.816 -> what a setItem does
322.589 -> does set, we've seen this
323.932 -> what a getItem does
325.037 -> getItem tells you what the value is on that key
328.22 -> so, the 2 methods we looked at
329.367 -> setItem and getItem, ok
330.75 -> localStorage.getItem whatever key will be given
332.632 -> will give you its value
334.292 -> get the value by key
335.663 -> what will the removeItem do
337.164 -> remove that item, okay
340.421 -> now suppose I write a A silly If statement
345.729 -> why did I say silly
347.093 -> because you practically never want to do this
349.19 -> but I am telling you now to teach you
352.244 -> if(key == "red" || "blue")
368.505 -> That is, if you have given a red or blue named key
372.451 -> then what to do
373.615 -> localStorage.removeItem, ok
379.146 -> we do not want such key, ok
381.489 -> So, what will happen
382.199 -> I will put this console above
383.741 -> why did I do this
384.991 -> I did this because
386.363 -> see what will happen
387.369 -> here you will be asked first key and the value
389.581 -> Understand this program, what will happen
390.934 -> you will be asked key and value
393.099 -> after that it will be set in your local storage, ok
396.782 -> this key value pair
398.122 -> after that you are getting console.log
402.243 -> The value at key is this, ok
405.306 -> And it will be happened
406.907 -> but it will be removed from the local storage
409.693 -> if it is red or blue
411.457 -> that is, if you wrote the key as red or blue
413.694 -> So, it will be removed from local storage
415.272 -> never will be set
416.766 -> at least through this program
418.866 -> So, let's see, first of all let's set a normal key
421.373 -> (a) to (b) let's see
422.797 -> it will happen, look (a, b) has come
424.971 -> but if I red over here
427.068 -> and favcol over here
429.578 -> then look here I came for once
430.92 -> if you look back at the video a little bit
432.34 -> came a flash of it came, after that it's gone, ok
437.97 -> and in the console it will come, ok
439.602 -> because the console we wrote above
441.192 -> So, what happens with the removeItem
442.828 -> the items get removed, ok
444.912 -> so, you can do it this way
447.361 -> now you clear it, so the local storage will completely clear
449.917 -> Ok
450.65 -> Now here your key becomes 0
452.895 -> suppose I do something like
454.41 -> if(key == 0)
457.862 -> then what you do
459.463 -> I will put (==), because 0 will be my string
462.78 -> I will do localStorage.clear, ok
465.951 -> And clear is a method, then I will do it
468.182 -> so, you see here I will keep writing
470.182 -> whatever I want in this program
471.839 -> I make it (b) as 7, ok
474.602 -> and i made the value at (b) is 7
476.614 -> Now suppose I want to change the corresponding value
479.127 -> of this key
480.182 -> then I can do that too
481.071 -> I'll show you how
482.568 -> you reload it, let's say I want to (B) do 10 this time, okay
486.096 -> so, I'll do 10 so it'll update here, ok
487.986 -> So, in this way you can also update by setItem
490.21 -> so, it's not that you can't update
492.25 -> then all these things can be done
493.542 -> Now look as soon as I turn the key to 0
495.663 -> Suppose I set the key to 0, I also set the value to 0
497.928 -> you see my local storage is cleared
500.135 -> why is it cleared
501.017 -> because I have written here If the key is 0
502.947 -> then the local storage will be cleared
504.298 -> this was done only to demonstrate to you
506.443 -> you may not do it in any normal program, ok
509.176 -> I just wanted to show you how localStorage.clear works
512.654 -> how localStorage.removeItem will work
515.225 -> localStorage.setItem and getItem we have seen, ok
518.77 -> So now I'll be back here
521.246 -> and here I'm going to tell you
523.138 -> that what this key is
524.524 -> Get the key on a given position, what this thing is
527.357 -> Now what happens is that what is the key on your index
531.355 -> I will show you here
533.193 -> and after that I will also tell you about localStorage.length
536.106 -> that the number of stored items in local storage
538.109 -> Like in this case we now have localStorage.length
541.83 -> if I talk about localStorage.length
545.321 -> and here you don't need to run it like a function
547.596 -> This is the property, if you do the .length it will be 0
549.83 -> but as soon as I reload it
551.705 -> let's say I set (a) to (b).
554.436 -> And let's say I set 56 as (h), ok
559.911 -> and if now I run localStorage.length over here
561.982 -> then it will come to 2
563.224 -> now let's run it again
564.648 -> and i put again here name harry
567.841 -> and if i write here localStorage.key
571.642 -> and after that i put index, suppose (0)
574.941 -> then it is giving me 56
576.426 -> Then after this I put key(1) in it, so it is giving me 6
580.373 -> Then I put key(2) then it is giving me null
582.25 -> Because there are only 2 items here in my local storage
586.081 -> no, null is also there in local storage
587.472 -> I delete the null
588.791 -> Actually, there is 4 items
589.957 -> so, this will keep me going, ok
591.405 -> so, I will do 2 here now, so the name has come
593.413 -> will do 3, so (a) has come
595.767 -> If I will do 4, then it is null here, ok
598.121 -> now null will start coming
599.364 -> because there are only 4 keys, index is starting from 0
602.412 -> So total here because I have 4 keys
605.335 -> 1, 2, 3, 4 so something is working like this, ok
607.807 -> hope you understand that all these things are working
611.038 -> Now what we will do
612.392 -> that local storage We have seen what happens
615.261 -> you can set and get this as an object as well
620.414 -> We will see this
621.76 -> you know that if i do localStorage.1 = 1
625.74 -> then localStorage.1 will be set to 1, ok
628.414 -> And like object, we can also delete in it
630.401 -> so, this syntax you can hardly use it
632.696 -> but this syntax also works, ok
634.912 -> Now let's talk about some important notes
637.707 -> both keys and values should be strings in local storage, ok
641.515 -> that is, if you have not done so
642.907 -> Even if you have to enter a number
644.237 -> if you enter a number
644.907 -> then the prompt will already make it a string, ok
647.818 -> But when it is store
648.846 -> then which is key value pair is string
652.865 -> We can use the two JSON methods
654.157 -> to store objects in local storage
655.855 -> If you want to store object in local storage
657.838 -> then JSON.string
658.929 -> which convert the object in JSON string
662.195 -> convert object to whom
663.429 -> in JSON strings
664.72 -> and JSON.parse
666.112 -> which converts a valid string
667.818 -> which is a valid JSON
669.476 -> into a JavaScript object, ok
672.529 -> It should be a valid JSON
674.451 -> there should be double quot in it
675.711 -> should follow all these JSON rules
678.071 -> then it will parse
679.134 -> otherwise, parsing error will come, ok
680.995 -> so, this thing you should know
682.998 -> In the next video, we will see about the session storage
684.888 -> and then after this we will also wrap up this chapter
688.157 -> for now, that's all in this video.
689.352 -> If you haven't accessed the playlist yet
691.097 -> make sure to do so.
692.232 -> Thankyou so much guys for watching this video
694.73 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=A98SPz5XLwY