1 00:00:00,570 --> 00:00:03,160 Hello and welcome to this video. 2 00:00:03,190 --> 00:00:07,540 In this video be showing you how to store it. 3 00:00:07,560 --> 00:00:16,470 Email from input in low call storage or be using jabba's script and three methods inside javascript 4 00:00:16,830 --> 00:00:18,870 cord said item. 5 00:00:18,930 --> 00:00:22,830 Get high and remove it. 6 00:00:23,260 --> 00:00:33,690 Set item issue is to specify the values for the item you want to store they are stored in the key value 7 00:00:33,930 --> 00:00:35,330 pair object. 8 00:00:35,520 --> 00:00:43,690 For example a key could be text or first name and value could be for example Rachel. 9 00:00:43,770 --> 00:00:51,030 Then they get high term is used to retrieve the item that has been saved remove it is used to remove 10 00:00:51,030 --> 00:00:54,000 the item that has been saved. 11 00:00:54,660 --> 00:00:57,800 I have already created a form. 12 00:00:57,810 --> 00:01:09,720 This is the form here and is this the input to also created some javascript functions and methods that 13 00:01:09,720 --> 00:01:12,450 will handle the storage for this form. 14 00:01:12,620 --> 00:01:20,190 Just to save time I I've already written the javascript I'll just walk you through the various aspects. 15 00:01:20,280 --> 00:01:24,180 So I've got three functions I have created. 16 00:01:24,180 --> 00:01:27,750 The first one is called Save. 17 00:01:28,110 --> 00:01:32,600 What this will do it will see the input has been entered in here. 18 00:01:32,610 --> 00:01:38,360 Once you click on the save button then the what's in between. 19 00:01:38,370 --> 00:01:40,620 So this is a first function here. 20 00:01:40,680 --> 00:01:42,780 So what does function will do. 21 00:01:42,900 --> 00:01:48,850 It will see in the input that has been entered and inside the function. 22 00:01:48,950 --> 00:01:50,870 Notice that they are called braces. 23 00:01:50,910 --> 00:01:53,530 In raining here inside of collaboratives. 24 00:01:53,550 --> 00:02:01,170 I have defined the variable name on the variable code name and is equal to documentum to get eliminated 25 00:02:01,170 --> 00:02:07,800 by a D and the is the first name I have a look at the form here. 26 00:02:07,800 --> 00:02:10,990 This is way as the fairly from the Heidi. 27 00:02:11,100 --> 00:02:13,090 So I've got an idea here. 28 00:02:13,200 --> 00:02:14,500 The value is. 29 00:02:14,500 --> 00:02:17,380 First name inside the form. 30 00:02:17,380 --> 00:02:23,830 This is the form that you can see this form here inside the form. 31 00:02:24,120 --> 00:02:26,610 I have created. 32 00:02:26,840 --> 00:02:28,290 There are two buttons here. 33 00:02:28,290 --> 00:02:32,240 The first save these save button here. 34 00:02:32,340 --> 00:02:41,530 Attached On Click event so this click event is equal to deceive function greater the function courts 35 00:02:41,530 --> 00:02:42,290 say. 36 00:02:42,570 --> 00:02:51,690 So when someone clicks on say in their name it will do what has been specified inside this same function. 37 00:02:51,690 --> 00:02:59,880 It will save the data and then have also created another click event and or click event swap. 38 00:03:00,060 --> 00:03:06,780 When a user enters details you can also you want to remove the data that's been entered. 39 00:03:06,780 --> 00:03:16,230 You can use to remove button click on it and it will respond to do removed function and remove the data 40 00:03:16,290 --> 00:03:17,920 that's been entered. 41 00:03:18,010 --> 00:03:19,190 That's what that does. 42 00:03:19,230 --> 00:03:25,250 Let's go back to the functions I have specified. 43 00:03:25,770 --> 00:03:28,670 So I created 3 function as the first one. 44 00:03:28,680 --> 00:03:37,860 This one here the say function this will handle data that's been entered and you took say it at all. 45 00:03:38,070 --> 00:03:46,380 This is a local cerate you have to define a local storage is in the set right and then specify the right 46 00:03:47,300 --> 00:03:49,140 key and the value. 47 00:03:49,140 --> 00:03:54,680 The key here is the text the values is name which is the name of this variable here. 48 00:03:54,810 --> 00:04:00,390 So whatever name is typed into the form or grip it will be saved. 49 00:04:00,540 --> 00:04:04,110 Has the name variable here. 50 00:04:04,500 --> 00:04:10,940 Then we've got the local story to handle the saving and then the other function I've created. 51 00:04:11,020 --> 00:04:13,140 Is a function called retrieve. 52 00:04:13,450 --> 00:04:19,170 What these will do it will retrieve the data that has been saved. 53 00:04:19,250 --> 00:04:21,970 When next you open the web browser. 54 00:04:22,300 --> 00:04:28,050 This is defined a variable called retrieve data and giving the value of local storage. 55 00:04:28,060 --> 00:04:35,940 Don't get tempted to get item This used to retrieve data that has been saved and the value here is text 56 00:04:36,600 --> 00:04:45,820 and then this is just a condition to check if the value is present so the value is present. 57 00:04:45,930 --> 00:04:47,170 Then it will return. 58 00:04:47,190 --> 00:04:51,090 If not it will return the value of on defined. 59 00:04:51,240 --> 00:04:56,030 So this is basically used to check if the value you are looking for is dead. 60 00:04:56,370 --> 00:04:59,650 Then cocreator done it off from here called removed. 61 00:04:59,910 --> 00:05:06,550 So if you want to remove any day Tyler you have entered this is what you would use to remove a dictator. 62 00:05:06,570 --> 00:05:09,650 So any data that's been entered here you can remove. 63 00:05:09,660 --> 00:05:12,090 You did not remove it. 64 00:05:12,150 --> 00:05:20,490 This method here is the javascript method used to remove data that has been stored and in value is specified 65 00:05:20,820 --> 00:05:22,360 inside the text. 66 00:05:22,650 --> 00:05:25,310 So let's check that out and see how that works. 67 00:05:25,320 --> 00:05:28,220 Go run lunch in Chrome. 68 00:05:29,250 --> 00:05:35,870 So I type in the name let me type in Rachel. 69 00:05:36,300 --> 00:05:37,470 Click save. 70 00:05:37,920 --> 00:05:39,330 So fi. 71 00:05:39,810 --> 00:05:40,880 Expand that. 72 00:05:41,070 --> 00:05:44,050 Now click on this using Google Chrome. 73 00:05:44,070 --> 00:05:55,260 Click on that click on More tools developer tools and then click on resources local story each click 74 00:05:55,260 --> 00:05:56,460 on file. 75 00:05:56,700 --> 00:05:59,180 We can see Rachel has been safe. 76 00:05:59,340 --> 00:06:01,140 So this is the text. 77 00:06:01,140 --> 00:06:03,550 The text is the key values. 78 00:06:03,570 --> 00:06:07,060 Rachel sweet save the day to Rachel. 79 00:06:07,110 --> 00:06:14,940 So if we want to remove data as being safe we can click on that and it will fire up the function code 80 00:06:14,970 --> 00:06:18,630 removed and remove Rachel from the database. 81 00:06:18,620 --> 00:06:30,960 If I click on that and go back and go more tools developer tools in notice the date our chore has disappeared 82 00:06:31,110 --> 00:06:32,740 because I have removed it. 83 00:06:32,940 --> 00:06:42,020 So this button saves the old arnwine remote so let me just type in different a time typing be there 84 00:06:43,440 --> 00:06:46,140 click save and go. 85 00:06:46,470 --> 00:06:54,800 But two's more check that sorry notice is saved the day tab just entered Peter. 86 00:06:55,020 --> 00:07:00,420 Again for one remove that I just click on the remote button and it should remove the. 87 00:07:00,780 --> 00:07:09,130 There are various ways you can store data in your local pizza so you can use a web Eskew El index TB. 88 00:07:09,510 --> 00:07:12,910 We have used local storage in this example. 89 00:07:12,990 --> 00:07:18,340 You can also use session storage session storage is the same as local storage. 90 00:07:18,350 --> 00:07:22,350 The difference that sessional storage and was the browser is closed. 91 00:07:22,500 --> 00:07:24,470 It doesn't retain any data. 92 00:07:24,480 --> 00:07:30,140 It deletes it whereas the local story still keeps the data as you can see here. 93 00:07:30,330 --> 00:07:37,010 So a weak web Escuela index dbe not all browser supports it. 94 00:07:37,080 --> 00:07:42,680 So there is a bit of fragmented support still some support where bascules support indexed. 95 00:07:42,990 --> 00:07:51,140 So if you you build in local application to utilize local story so you can use Web bascule indexed TB 96 00:07:51,580 --> 00:07:55,660 or and then in combination with the application cache. 97 00:07:55,740 --> 00:08:02,340 So the example I have shown you here we only store one data at a time so if I type in something else 98 00:08:02,340 --> 00:08:05,730 here now it will replace what I've already saved. 99 00:08:06,010 --> 00:08:16,620 So it is possible to see multiple values in one key but you have to use things like a list or three. 100 00:08:16,630 --> 00:08:22,060 Also using son Jason stands for javascript object notation. 101 00:08:22,410 --> 00:08:25,910 So these are more complex more complex ways of doing it. 102 00:08:25,980 --> 00:08:28,620 And it's beyond the scope of this field. 103 00:08:28,880 --> 00:08:30,670 But just a simple is easy. 104 00:08:30,690 --> 00:08:39,410 Just to show you a simple way that you can store just one data value at a time. 105 00:08:39,420 --> 00:08:42,170 I hope this video has been used for. 106 00:08:42,170 --> 00:08:50,880 I apologize if this can be complicated I the code here would be available to download just go to put 107 00:08:50,880 --> 00:08:54,730 it code and if there are any parts you do not understand please let me know. 108 00:08:54,990 --> 00:09:06,000 The example here is chorse for storing just one item at a time so the more more example the to store 109 00:09:06,000 --> 00:09:14,700 multiple values is beyond the scope of this feed you are creating a better fit your on storage later 110 00:09:14,700 --> 00:09:15,660 in the New Year. 111 00:09:15,900 --> 00:09:23,120 We should cover how you talk more to poor values either using the Web rescue or indexed. 112 00:09:23,250 --> 00:09:28,410 Or we can use arrays to store multiple values inside one key buffer. 113 00:09:28,410 --> 00:09:33,530 The purpose there is schedule you were just just to store one item at a time. 114 00:09:33,780 --> 00:09:35,660 Thank you so much for watching. 115 00:09:35,700 --> 00:09:36,630 Take care. 116 00:09:36,630 --> 00:09:37,670 Bye for now.