1 00:00:01,440 --> 00:00:06,750 Welcome back, my friend, to another lecture today, we're going to learn about storage, local storage 2 00:00:06,750 --> 00:00:09,080 and storage was the difference between them. 3 00:00:09,090 --> 00:00:09,870 Why do we need them? 4 00:00:09,870 --> 00:00:12,870 So we don't have any database to actually store the data. 5 00:00:12,870 --> 00:00:13,190 Right. 6 00:00:13,410 --> 00:00:19,280 But with JavaScript, we can store that data and we can store that. 7 00:00:19,350 --> 00:00:24,810 You're using a local storage, not the local storage, that they don't be there after we closed the 8 00:00:24,810 --> 00:00:25,360 browser. 9 00:00:26,010 --> 00:00:31,610 So, for example, if there is something here, so key and value pairs, we do have key and valuable. 10 00:00:31,770 --> 00:00:35,940 So key should be, for example, anything in the value can be also anything. 11 00:00:36,270 --> 00:00:37,940 And if we close this one. 12 00:00:37,950 --> 00:00:40,020 So I'm just starting this Google Chrome. 13 00:00:40,140 --> 00:00:40,450 Right. 14 00:00:40,770 --> 00:00:45,420 It's a little bit different in Firefox, but if we close this one in the local storage, the data will 15 00:00:45,420 --> 00:00:45,950 stay here. 16 00:00:46,080 --> 00:00:51,100 Otherwise the section storage, the data will not stay there. 17 00:00:51,120 --> 00:00:52,350 So that is the difference. 18 00:00:52,350 --> 00:00:58,520 So if I close the browser because it's a section, the section will expire and that's pretty much it. 19 00:00:58,530 --> 00:00:59,920 There is no data anymore. 20 00:01:00,120 --> 00:01:07,890 No, I have this local storage and we have a written for method's set item, get item, remove item 21 00:01:07,890 --> 00:01:09,620 and clear them from the storage. 22 00:01:10,050 --> 00:01:14,910 So any method we use here can be used for a local in session. 23 00:01:15,750 --> 00:01:18,260 Now I'm just going to copy this e-mail. 24 00:01:18,270 --> 00:01:19,050 I'm going to based it. 25 00:01:19,060 --> 00:01:20,580 I'm going to rename as a storage 26 00:01:23,370 --> 00:01:29,700 and because I don't want to mess around with the index right now here. 27 00:01:32,740 --> 00:01:38,800 Local and session storage with JavaScript. 28 00:01:41,880 --> 00:01:47,580 Make it like that now you need to go to storage that HTML. 29 00:01:47,810 --> 00:01:48,450 Here it is. 30 00:01:50,610 --> 00:01:52,260 It's not good looking. 31 00:01:52,260 --> 00:01:54,890 So I'm going to see style here. 32 00:01:55,380 --> 00:01:57,070 So I'm putting in line style. 33 00:01:57,090 --> 00:02:01,510 This is how you utilize the text, a line to center that should fix. 34 00:02:02,220 --> 00:02:02,540 Yes. 35 00:02:02,880 --> 00:02:03,570 Now it's fixed. 36 00:02:03,960 --> 00:02:06,810 And I do have some gibberish here that is coming from. 37 00:02:07,470 --> 00:02:07,860 Yeah. 38 00:02:09,030 --> 00:02:11,330 This is coming from a source, Matt Eurail. 39 00:02:11,340 --> 00:02:12,690 Don't worry about it's not error. 40 00:02:13,320 --> 00:02:14,010 So yeah. 41 00:02:14,340 --> 00:02:16,100 I don't know what was the problem. 42 00:02:16,850 --> 00:02:17,440 Yeah. 43 00:02:17,640 --> 00:02:23,970 So I'm just going to clear you can clear up now here in the U.S. ally. 44 00:02:24,090 --> 00:02:28,380 I just want to comment this, remove all of this. 45 00:02:30,000 --> 00:02:31,680 And if I refresh. 46 00:02:31,680 --> 00:02:32,000 Yeah. 47 00:02:32,010 --> 00:02:40,620 I don't have any elai elements then to remove all of these and I'm going to call this one local storage. 48 00:02:41,640 --> 00:02:50,340 So in the local storage, you will learn now how to set a data, set an item, extract that item and 49 00:02:50,460 --> 00:02:52,240 yeah, a lot of interesting things. 50 00:02:52,620 --> 00:02:53,820 Now, first things first. 51 00:02:54,390 --> 00:03:00,000 We need to I'm just going to copy this one and I'm going to make it like this sad item and we're going 52 00:03:00,000 --> 00:03:00,840 to see local storage. 53 00:03:00,840 --> 00:03:07,590 That's the key word that that set item in is that we need to put my key word here. 54 00:03:07,590 --> 00:03:10,680 You can be your name and here we will be the value. 55 00:03:10,920 --> 00:03:12,150 We will say my value. 56 00:03:13,780 --> 00:03:17,320 Yeah, well, I like that so you can be named. 57 00:03:17,350 --> 00:03:18,980 You can be your last name, whatever you want. 58 00:03:19,150 --> 00:03:20,500 The first part is the key. 59 00:03:20,500 --> 00:03:23,750 The last second part after the comma is the actual value. 60 00:03:24,220 --> 00:03:26,090 Now, that is how we can set it. 61 00:03:27,040 --> 00:03:32,170 So what we can do is actually we can just refresh this one. 62 00:03:34,980 --> 00:03:42,540 And here it is, Mikey, why is this bother me that OK, so in the local storage, I have my key and 63 00:03:42,540 --> 00:03:43,570 my value, right. 64 00:03:44,160 --> 00:03:44,940 How cool is this? 65 00:03:45,600 --> 00:03:46,330 There you go. 66 00:03:46,470 --> 00:03:48,390 No, I'm just going to open it. 67 00:03:48,390 --> 00:03:48,930 Google. 68 00:03:49,110 --> 00:03:53,520 I mean, I'm going to open in Firefox and I'm going to show you that it's going to be pretty much the 69 00:03:53,520 --> 00:03:54,240 same time. 70 00:03:54,660 --> 00:03:57,660 You need to go to storage HDMI. 71 00:03:57,770 --> 00:04:00,080 I'm going to refresh inspect element. 72 00:04:00,240 --> 00:04:01,290 There is a storage. 73 00:04:01,980 --> 00:04:03,630 You don't go in cookies, by the way. 74 00:04:03,630 --> 00:04:06,720 You need to go to the local storage area is my key. 75 00:04:06,720 --> 00:04:07,770 My my value. 76 00:04:07,770 --> 00:04:08,080 Right. 77 00:04:08,250 --> 00:04:09,530 So this is your data. 78 00:04:09,840 --> 00:04:13,990 This is the first part is the key after the semicolon is my data my value. 79 00:04:14,730 --> 00:04:17,190 Now this is how we can set. 80 00:04:17,940 --> 00:04:19,350 Now let's do something else. 81 00:04:19,860 --> 00:04:20,460 Get item. 82 00:04:20,710 --> 00:04:24,030 That's the fastest way we can learn. 83 00:04:24,390 --> 00:04:31,260 Now I'm going to store this one in variable called var item and I'm going to store it and I'm going 84 00:04:31,260 --> 00:04:37,350 to say, OK, get item looked the description, sorry, whichever value by the Iraqi. 85 00:04:37,620 --> 00:04:39,680 And this is the key. 86 00:04:39,990 --> 00:04:44,010 So I'm going to use it to store it and get items. 87 00:04:44,010 --> 00:04:45,130 Should be right. 88 00:04:45,150 --> 00:04:46,270 It's not going to work otherwise. 89 00:04:46,620 --> 00:04:52,150 Now I can cassella the item or what is better. 90 00:04:52,320 --> 00:04:54,000 What we can do we can alerta. 91 00:04:58,890 --> 00:04:59,520 Let's save it. 92 00:05:00,090 --> 00:05:02,670 Let's refresh it really is my values there. 93 00:05:02,790 --> 00:05:05,760 Otherwise I will need to go to Inspecteur here and find a way. 94 00:05:05,880 --> 00:05:06,220 Right. 95 00:05:06,870 --> 00:05:11,730 Same should be your Google Chrome right now. 96 00:05:11,730 --> 00:05:14,540 I'm just going to comment this part so you can use both of this. 97 00:05:14,820 --> 00:05:17,510 So if you do console, make sure that you go to the console. 98 00:05:17,820 --> 00:05:18,480 Should be here. 99 00:05:18,690 --> 00:05:20,610 Ignore all this nonsense. 100 00:05:21,150 --> 00:05:23,550 Right, clear what's happening. 101 00:05:23,730 --> 00:05:33,090 So even if you go to Google, look with what's happening, Google dot com and if you go inspect, look 102 00:05:33,090 --> 00:05:35,250 how many errors they're going to have. 103 00:05:36,510 --> 00:05:36,800 Wow. 104 00:05:36,960 --> 00:05:37,830 They did OK. 105 00:05:37,830 --> 00:05:38,160 Yeah. 106 00:05:38,610 --> 00:05:42,270 Say it's a yeah yesterday. 107 00:05:42,270 --> 00:05:47,460 They have like tons of errors but in different browser, I'm just going to show you in different browser 108 00:05:47,460 --> 00:05:48,960 there's a different errors. 109 00:05:49,800 --> 00:05:50,930 So I'm going to console. 110 00:05:50,940 --> 00:05:51,450 Here it is. 111 00:05:54,320 --> 00:05:55,250 How cool is this? 112 00:05:55,280 --> 00:05:58,100 These are coming from some of them, black shadow, stuff like that. 113 00:05:58,280 --> 00:05:59,660 Don't worry about those errors. 114 00:05:59,990 --> 00:06:00,970 So I'm going to clear them. 115 00:06:00,980 --> 00:06:03,070 And you don't need them, especially now. 116 00:06:03,650 --> 00:06:04,200 Oh, good. 117 00:06:04,430 --> 00:06:06,800 So we know two things. 118 00:06:06,800 --> 00:06:08,690 We ought to set one to get one. 119 00:06:08,700 --> 00:06:10,040 Now, how do we remove an item? 120 00:06:10,050 --> 00:06:15,590 That's a that's one of the good things that we can remove from our local storage. 121 00:06:15,830 --> 00:06:17,300 So you can use the remove. 122 00:06:17,300 --> 00:06:22,790 And I don't need these more item here in actually, I'm not going on alert or anything, so I'm going 123 00:06:22,790 --> 00:06:26,060 to remove my dear item by their key. 124 00:06:26,150 --> 00:06:27,180 So this is the key. 125 00:06:27,750 --> 00:06:29,440 Now I do have it here. 126 00:06:29,840 --> 00:06:30,410 Here it is. 127 00:06:31,130 --> 00:06:40,850 So when I refresh gone, if I go here, if I refresh, if I go to application here, there are a lot 128 00:06:40,850 --> 00:06:42,560 of other things, but there is nothing. 129 00:06:43,220 --> 00:06:45,650 There is no my key right now. 130 00:06:46,250 --> 00:06:49,260 If you want to get rid of this, I'm going to show you the last one. 131 00:06:50,060 --> 00:06:51,430 So that is a good item. 132 00:06:51,450 --> 00:06:53,700 So actually that was remove item. 133 00:06:53,730 --> 00:06:57,380 Sorry, I'm just keeping things, guys. 134 00:06:57,380 --> 00:06:59,710 Keeping things that's healthy now. 135 00:07:01,020 --> 00:07:02,740 We don't need those things now. 136 00:07:02,750 --> 00:07:07,100 I'm just going to copy it and I'm going to put it here in the last part is clear. 137 00:07:07,100 --> 00:07:19,400 That will clear all local storage and you don't need to set any valuables, any keys here, no CDS ordinances 138 00:07:19,400 --> 00:07:23,030 here that we have to close all of these things. 139 00:07:23,360 --> 00:07:25,730 So when I do it like this, there will be cleared. 140 00:07:26,330 --> 00:07:27,260 How cool is this? 141 00:07:27,440 --> 00:07:31,690 So it's clear everything that is in our database, I mean, in local storage. 142 00:07:31,850 --> 00:07:34,490 So I'm just going to just going to comment this. 143 00:07:34,500 --> 00:07:35,620 But now one more thing. 144 00:07:36,260 --> 00:07:37,700 So we're going to set the item here. 145 00:07:37,700 --> 00:07:39,920 I'm not going to clear I'm just going to comment all of this. 146 00:07:41,300 --> 00:07:43,700 I'm just going to come I'm just going to do it like that. 147 00:07:43,880 --> 00:07:45,240 So there is my key. 148 00:07:45,260 --> 00:07:45,650 Right. 149 00:07:46,500 --> 00:07:51,140 And after that, a bunch of other things that you don't need to know. 150 00:07:51,560 --> 00:07:57,260 I'm no special storage, as I told you. 151 00:07:58,550 --> 00:08:01,040 If we now I'm just going to copy the URL. 152 00:08:01,040 --> 00:08:02,390 I'm going to close this one. 153 00:08:03,350 --> 00:08:05,420 I'm going to close this one as well. 154 00:08:05,600 --> 00:08:08,030 And I'm going to say Google here. 155 00:08:08,360 --> 00:08:09,610 I'm going to go there. 156 00:08:10,520 --> 00:08:15,830 So I'm just load again, inspect it, and I should be able to see my value here. 157 00:08:15,830 --> 00:08:17,780 It is still there intact. 158 00:08:18,110 --> 00:08:18,470 Right. 159 00:08:18,710 --> 00:08:19,670 Section storage. 160 00:08:19,670 --> 00:08:23,330 When I do that, first, I need to set it here. 161 00:08:23,450 --> 00:08:26,190 So I'm just going to tell you how how you can sell. 162 00:08:26,540 --> 00:08:31,430 So session storage set item in here. 163 00:08:31,430 --> 00:08:36,080 My key, my session value. 164 00:08:37,370 --> 00:08:38,300 I'm going to do it like this. 165 00:08:39,260 --> 00:08:41,290 So I'm just going to refresh one more time. 166 00:08:42,200 --> 00:08:48,380 Now, if you go in a session storage here, it's my session value. 167 00:08:48,380 --> 00:08:49,790 But look what's happening now. 168 00:08:51,290 --> 00:08:54,710 So because we set it once more, we're just going to comment this one. 169 00:08:54,710 --> 00:08:56,030 I'm going to comment everything now. 170 00:08:56,240 --> 00:09:02,060 So we everything now we we need to comment because we don't want to sell it again right now. 171 00:09:02,060 --> 00:09:03,470 I'm just going to close it here. 172 00:09:05,120 --> 00:09:06,590 I'm going to open even the Google Chrome. 173 00:09:06,590 --> 00:09:09,170 So, yeah, localhost. 174 00:09:09,170 --> 00:09:12,800 I lost that thing down and I think more storage. 175 00:09:14,180 --> 00:09:15,200 Here it is now. 176 00:09:15,200 --> 00:09:21,320 I'm just going to go in on a specter and go into storage and I'm going to local storage. 177 00:09:22,220 --> 00:09:24,710 Local storage is empty. 178 00:09:24,950 --> 00:09:26,270 It was empty. 179 00:09:26,390 --> 00:09:26,720 Oh yeah. 180 00:09:26,720 --> 00:09:28,330 Because I've just done it that way. 181 00:09:28,490 --> 00:09:29,030 That way. 182 00:09:31,450 --> 00:09:31,850 Right. 183 00:09:32,890 --> 00:09:35,400 So we don't have those both keys. 184 00:09:37,200 --> 00:09:40,000 Let's initialize it said keys set value. 185 00:09:40,570 --> 00:09:41,010 Right. 186 00:09:41,650 --> 00:09:45,760 So here I do have set for a local in session storage both. 187 00:09:46,180 --> 00:09:49,570 Now, I'm just going to close it. 188 00:09:50,480 --> 00:09:51,790 I'm just going to comment everything. 189 00:09:54,600 --> 00:10:01,020 Right here, if I refresh, it's going to be there, so I'm going to copy that one. 190 00:10:01,230 --> 00:10:06,890 So when I go back here, I do expect the local storage to be there because I didn't remove it. 191 00:10:10,820 --> 00:10:13,420 He wants I hold it, I've no idea. 192 00:10:13,690 --> 00:10:14,200 Just wait. 193 00:10:14,440 --> 00:10:16,890 I need to test this one in the other browser as well. 194 00:10:17,140 --> 00:10:22,660 So you should, by definition, should hold it right now. 195 00:10:22,740 --> 00:10:26,620 I'm just going to inspect their location. 196 00:10:27,460 --> 00:10:30,470 So local storage should hold the value. 197 00:10:30,610 --> 00:10:31,190 Here it is. 198 00:10:31,390 --> 00:10:40,450 I don't know what's what's happening with the with Google Firefox, but it should hold the value in 199 00:10:40,450 --> 00:10:41,000 this one. 200 00:10:41,020 --> 00:10:42,240 It's not there anymore. 201 00:10:42,250 --> 00:10:42,580 Right. 202 00:10:42,820 --> 00:10:48,420 So it holds here the value, but it's not holding in storage. 203 00:10:48,460 --> 00:10:53,580 So make sure that I've have no idea, maybe in settings have to set something right. 204 00:10:53,950 --> 00:10:55,030 Maybe that's the case. 205 00:10:55,480 --> 00:10:58,920 If that is the case where you just tell me where I need to fix that one. 206 00:10:59,080 --> 00:10:59,330 Right. 207 00:10:59,500 --> 00:11:06,640 But by definition, the local storage and all the value in storage when you restart the browser, I'm 208 00:11:06,640 --> 00:11:13,060 just going to start the Google Chrome again just to tell you that it's working now. 209 00:11:13,090 --> 00:11:14,740 I'm going to go inspect it. 210 00:11:15,490 --> 00:11:19,480 Good applications, local session is nothing. 211 00:11:20,170 --> 00:11:21,700 And we do have my key. 212 00:11:21,710 --> 00:11:24,310 Plus, we do have these two things that we don't need. 213 00:11:24,310 --> 00:11:24,700 Right. 214 00:11:26,420 --> 00:11:32,150 So, yeah, now that is how you can set get remove clear. 215 00:11:32,180 --> 00:11:38,150 Now, I'm not going to show you one lot more things with this, but we are going to do a little bit 216 00:11:38,150 --> 00:11:39,590 more interesting something next time. 217 00:11:40,190 --> 00:11:41,300 It's going to be better than this. 218 00:11:41,540 --> 00:11:46,550 So you know how to use the storage, how to set a value, how to remove by the key. 219 00:11:46,940 --> 00:11:50,900 And you can put more more items in your storage. 220 00:11:50,900 --> 00:11:51,230 Right. 221 00:11:51,260 --> 00:11:52,250 You can retrieve them. 222 00:11:52,260 --> 00:11:53,240 You can do whatever you want. 223 00:11:53,390 --> 00:11:58,030 But use this Google Chrome because I don't know, it should work. 224 00:11:58,040 --> 00:12:00,380 Same with the Firefox, but maybe somewhere in the settings. 225 00:12:00,590 --> 00:12:01,450 I have done something. 226 00:12:01,460 --> 00:12:02,420 So thank you very much. 227 00:12:02,540 --> 00:12:03,640 I hope you enjoy this one. 228 00:12:03,650 --> 00:12:06,590 Now you're master of local storage in session storage. 229 00:12:06,740 --> 00:12:07,340 Thank you.