1 00:00:00,330 --> 00:00:05,790 It ready to start setting some cookies within the button action function, we know that we can detect 2 00:00:05,790 --> 00:00:10,140 what type of input it is and what the name of the value is. 3 00:00:10,150 --> 00:00:15,870 So the cookie values of taking all of those values from the inputs over here, we've got set and that 4 00:00:15,870 --> 00:00:16,860 within temp. 5 00:00:17,250 --> 00:00:24,840 So we can use that as a condition where we can check to see if temp is equal to set and if it is equal 6 00:00:24,840 --> 00:00:30,420 to set, then this is the action that we want to take and this particular action, we want to set a 7 00:00:30,420 --> 00:00:30,770 cookie. 8 00:00:30,780 --> 00:00:36,060 So we need to pass some information and we're going to create a function in order to handle that. 9 00:00:36,390 --> 00:00:43,530 So we're getting our cookie object, which is contained within V and setting a cookie name the parameters 10 00:00:43,530 --> 00:00:44,130 that we need. 11 00:00:44,340 --> 00:00:47,170 Other thing that we need is a cookie value. 12 00:00:47,280 --> 00:00:53,190 So again, going and looking in that object and this is again being constructed from the inputs, we're 13 00:00:53,190 --> 00:00:54,540 going to set a cookie value. 14 00:00:54,690 --> 00:00:59,400 And then lastly, let's set a cookie expiry values. 15 00:00:59,400 --> 00:01:01,050 So let's cookie expire. 16 00:01:01,230 --> 00:01:04,050 So these are coming from the input values. 17 00:01:04,110 --> 00:01:07,190 This is going to be a function where we're using set. 18 00:01:07,380 --> 00:01:16,550 We can also have different conditions where we do else if and checking to see if temp is equal to get, 19 00:01:17,220 --> 00:01:20,070 then we can run a function for a get as well. 20 00:01:20,460 --> 00:01:26,490 So this function could be we can't call this or call this one yet and we only need one parameter. 21 00:01:26,500 --> 00:01:29,060 So that's the cookie name that we need to send. 22 00:01:29,070 --> 00:01:31,320 And also let's apply a few other conditions. 23 00:01:31,590 --> 00:01:38,160 So we're check to see if it's delete and if it's delete we can do on iRace Cookie. 24 00:01:38,500 --> 00:01:41,060 So how about we set it as a race cookie function? 25 00:01:41,460 --> 00:01:47,850 And then lastly, if this is equal to all, then what we want to do is just list the cookies. 26 00:01:47,850 --> 00:01:52,100 We can just call that list cookie so we don't have to send any parameters into that function. 27 00:01:52,170 --> 00:01:54,060 So that's all of the functionality we need. 28 00:01:54,060 --> 00:01:57,550 And next, we just need to create the functions in order to handle that. 29 00:01:57,840 --> 00:02:03,990 So the first one is sending set cookie and set cookie is getting a few parameters. 30 00:02:03,990 --> 00:02:10,170 Pastan So setting up the function, call it set cookie and the parameters that we're passing in so that 31 00:02:10,170 --> 00:02:14,870 we've got a name, we've got a value and we've got an expiry value. 32 00:02:15,150 --> 00:02:17,100 We also have a get cookie. 33 00:02:17,520 --> 00:02:20,430 So then get Cookie what we're returning back. 34 00:02:20,430 --> 00:02:22,650 And what we're expecting is just the name. 35 00:02:22,650 --> 00:02:24,740 We don't need value, we don't need expiry. 36 00:02:25,050 --> 00:02:26,960 So this one is get cookie. 37 00:02:27,150 --> 00:02:30,810 So setting up all the different handler functions in order to handle that. 38 00:02:31,200 --> 00:02:37,560 We had another one that we called Arace Cookie and this array's cookie is retrieving back, using the 39 00:02:37,560 --> 00:02:38,400 cookie name. 40 00:02:38,670 --> 00:02:41,250 And then lastly, we have one last function. 41 00:02:41,490 --> 00:02:48,000 And this function is just going to be called list cookies as no parameters being passed in here. 42 00:02:48,010 --> 00:02:52,200 So this is list cookies and this will handle the listing of all of the cookies. 43 00:02:52,440 --> 00:02:53,380 So let's see what happens. 44 00:02:53,410 --> 00:02:55,260 So so far, not a whole lot. 45 00:02:55,440 --> 00:02:58,020 And we need to be able to set a cookie. 46 00:02:58,350 --> 00:02:59,520 So show you how to do that. 47 00:02:59,520 --> 00:03:07,140 And in order to set a cookie value in JavaScript, you need to have a date value to date object value. 48 00:03:07,230 --> 00:03:13,430 So we're passing in that expire value and we can console log that expire of value out. 49 00:03:13,740 --> 00:03:21,840 And because it is within a date format, we can use the two UTC string method in JavaScript. 50 00:03:21,840 --> 00:03:24,600 So see what happens when we try to set a cookie. 51 00:03:24,630 --> 00:03:27,150 So let me refresh that and we set a cookie. 52 00:03:27,300 --> 00:03:29,600 So we're getting that UTC string value. 53 00:03:29,940 --> 00:03:34,500 So this is something that we can use in order to set our expiry date. 54 00:03:34,950 --> 00:03:39,870 So all we have to do now is specify and set the cookie using JavaScript. 55 00:03:40,440 --> 00:03:46,320 And we also want to make sure that we are setting we are we do have a value that we're setting. 56 00:03:46,320 --> 00:03:54,510 So we're checking to see if the value that's Pastan and value a length is greater than zero. 57 00:03:54,720 --> 00:03:57,030 So that means that we can set the cookie. 58 00:03:57,270 --> 00:04:03,990 And if it's not, then let's output some content within the output and adding the text content. 59 00:04:05,010 --> 00:04:12,230 So this is a message that's going back to the user kookie needs a value, so try that one out. 60 00:04:12,270 --> 00:04:19,110 So if we don't have a value into here and we do set kookie, we get an error message that cookie needs 61 00:04:19,110 --> 00:04:20,810 a value being sent back. 62 00:04:20,820 --> 00:04:27,440 And over here we can do cookie set set and we can also add in the name as well. 63 00:04:27,840 --> 00:04:29,550 So let's add that in now. 64 00:04:29,730 --> 00:04:32,620 So passing in the cookie name and you can try this one. 65 00:04:32,880 --> 00:04:35,870 So do set and Cookie Testim set. 66 00:04:35,880 --> 00:04:38,690 So you've got some information, but of course we haven't set the cookie. 67 00:04:39,090 --> 00:04:43,080 And in order to set the cookie in JavaScript, it's relatively easy and straightforward. 68 00:04:43,320 --> 00:04:52,200 So you use document and then using the document object, you can set the cookie into that document object. 69 00:04:52,500 --> 00:04:53,610 So that's all you need to do. 70 00:04:53,970 --> 00:04:55,950 And you do need to pass in the parameters. 71 00:04:55,950 --> 00:05:00,470 So it does need a name and then we've got an equal sign. 72 00:05:00,480 --> 00:05:02,920 So there is a strong value that needs to be added in. 73 00:05:03,360 --> 00:05:07,290 We also need to encode you are I component. 74 00:05:07,530 --> 00:05:14,880 So what this does is this encodes the name of it and encodes that, I should say encodes the value that 75 00:05:14,880 --> 00:05:15,670 we're passing in. 76 00:05:15,840 --> 00:05:21,330 So make sure that there's no spaces and that it's encoded properly, separated by a semicolon. 77 00:05:21,540 --> 00:05:25,320 And then we need to specify the path of where the cookie is located. 78 00:05:25,540 --> 00:05:27,960 So we're just doing a default path as we're not setting that. 79 00:05:28,260 --> 00:05:33,730 And then lastly, the other parameter that we can set here is the expires of the cookie. 80 00:05:34,140 --> 00:05:41,910 So this is going to be a value that we're getting from expire and we're setting this value, the UTC 81 00:05:41,910 --> 00:05:42,560 string value. 82 00:05:43,440 --> 00:05:45,360 So so we console logged that out. 83 00:05:45,360 --> 00:05:51,180 And in order to set cookies, I did want to note something that the cookies won't set within the file 84 00:05:51,180 --> 00:05:51,750 protocol. 85 00:05:51,990 --> 00:05:59,160 So if you're just using the regular path on your computer to access the application, that HTML, JavaScript 86 00:05:59,160 --> 00:06:03,630 and access will run, but you're not going to actually be able to set a cookie. 87 00:06:03,810 --> 00:06:08,730 And you can see this when you go in your console, when you type in document cookie, you're going to 88 00:06:08,730 --> 00:06:14,340 see that it returns back blank because not able to set it within the file protocol and in order to set 89 00:06:14,340 --> 00:06:20,190 cookies, it needs to be done within the protocol because they are domain based. 90 00:06:20,190 --> 00:06:24,330 And Brackett's does give you an option to create a local machine. 91 00:06:24,330 --> 00:06:27,510 Go to Brackett's and it depends on your editor. 92 00:06:27,690 --> 00:06:32,700 Some editors will have these types of features and others might not do live preview. 93 00:06:32,700 --> 00:06:39,480 If you go to Brackett's, this will open up the live preview window and run the index file within a 94 00:06:39,480 --> 00:06:40,470 file protocol. 95 00:06:40,590 --> 00:06:46,770 And you can see that because it's got the IP address as extension running in the file protocol. 96 00:06:46,860 --> 00:06:48,990 And this is where you can actually set Cookie. 97 00:06:49,110 --> 00:06:58,860 And now if you go to the inspector, go into the console and then document cookie, you see that the 98 00:06:58,860 --> 00:07:00,960 cookie value now has been set. 99 00:07:00,990 --> 00:07:07,680 So if we update this value and if we do set Cookie again and then again the document cookie, you see 100 00:07:07,680 --> 00:07:09,370 that now it contains that new value. 101 00:07:09,540 --> 00:07:11,610 So it is setting that cookie value. 102 00:07:11,700 --> 00:07:17,640 But this is only available within the local machine or the HTP protocol. 103 00:07:17,830 --> 00:07:21,780 So you do need to make sure that you're not running within the file protocol. 104 00:07:21,960 --> 00:07:25,520 And on a Mac, you can see when I'm running in Chrome, it has file. 105 00:07:25,740 --> 00:07:28,560 So it gives you the site information as file. 106 00:07:28,560 --> 00:07:30,510 And this is just an opened index. 107 00:07:30,750 --> 00:07:37,590 The life preview version in brackets opens it up within the protocol and allows you to set cookies so 108 00:07:37,590 --> 00:07:41,520 you will need to run it H.T. protocol in order to see the cookies. 109 00:07:41,820 --> 00:07:48,540 But you can see the interaction with JavaScript and the DOM in the regular file protocol.