1
00:00:00,460 --> 00:00:02,700
Our car functionality is working.

2
00:00:02,700 --> 00:00:04,590
We can add items we can remove.

3
00:00:04,590 --> 00:00:05,710
We can increase the amount.

4
00:00:05,710 --> 00:00:06,710
Decrease the amount.

5
00:00:06,780 --> 00:00:11,570
The problem is that each and every time reorganize refresh the page we're gonna start from the scratch

6
00:00:11,820 --> 00:00:16,790
because within the car context we are starting from the empty array.

7
00:00:16,820 --> 00:00:18,110
That's the reason for that.

8
00:00:18,260 --> 00:00:20,540
And how would we be able to fix it.

9
00:00:20,550 --> 00:00:27,250
Well we could use the local storage where each and every time we're going to update something about

10
00:00:27,250 --> 00:00:28,170
the card.

11
00:00:28,170 --> 00:00:33,500
We could also use the local storage and we could set some kind of key value pair.

12
00:00:33,510 --> 00:00:39,150
Now I'm gonna name my killer value pair cart but as always you can name it how are you want and the

13
00:00:39,150 --> 00:00:46,360
way it's gonna work is I'm going to say local storage not local card local storage land.

14
00:00:46,410 --> 00:00:53,460
The methods we're looking for is set item and then we're gonna write a new value by the name of card

15
00:00:53,880 --> 00:00:57,300
so key value pair the key name is going to be cut.

16
00:00:57,360 --> 00:01:02,850
Now we do need to make sure that we use adjacent string fire because we're going to store it as a string

17
00:01:03,240 --> 00:01:05,780
and we're just passing right now our cards values.

18
00:01:06,130 --> 00:01:11,610
So in each and every time we're going to update something about the card we're also gonna set it in

19
00:01:11,670 --> 00:01:12,810
our local storage.

20
00:01:12,810 --> 00:01:15,580
Please understand that I purposely just overwriting this.

21
00:01:15,750 --> 00:01:20,190
So whatever value I'm going to have initially the moment I'm gonna update something about my card I'm

22
00:01:20,190 --> 00:01:21,780
just going to overwrite that.

23
00:01:21,780 --> 00:01:25,410
Now I'm going to save it and we're going to check it out in a console.

24
00:01:25,410 --> 00:01:26,420
What we're going to have.

25
00:01:26,580 --> 00:01:32,160
So currently if I'm going to store to inspect and then if we'll look to application then we have local

26
00:01:32,160 --> 00:01:33,050
storage.

27
00:01:33,180 --> 00:01:35,910
And of course we're looking for local stores 3000.

28
00:01:36,000 --> 00:01:43,230
We have a card that is set equal to an empty array and we also would want to set it up that each and

29
00:01:43,230 --> 00:01:49,170
every time of course once we load the application we get the info of whatever the correct value was.

30
00:01:49,590 --> 00:01:54,060
So if I'm gonna head over to the product and let's say if I were to say I had the card.

31
00:01:54,210 --> 00:01:58,000
Notice how we're adding right now items to our local storage.

32
00:01:58,050 --> 00:02:04,020
Now we have one item then let's say if we're gonna add one more then we're gonna have two items in a

33
00:02:04,040 --> 00:02:06,000
cart and all that works really well.

34
00:02:06,030 --> 00:02:07,970
But again the moment we're going to refresh.

35
00:02:08,100 --> 00:02:14,940
Well there's no way for us currently to get that info of whatever values we have in the card so we're

36
00:02:14,940 --> 00:02:20,780
gonna have to head lower back to our application and instead of starting from scratch I'm going to set

37
00:02:20,780 --> 00:02:22,270
up here a function.

38
00:02:22,280 --> 00:02:28,920
And again my naming is gonna be different probably from yours but I'm gonna call my function get card

39
00:02:28,950 --> 00:02:31,080
from local storage.

40
00:02:31,080 --> 00:02:32,720
So let's set up our function.

41
00:02:32,880 --> 00:02:44,310
So we have function get card from local storage storage that way I know for sure what this function

42
00:02:44,370 --> 00:02:45,280
is doing.

43
00:02:45,480 --> 00:02:50,700
And then this function is going to return one of two things either it is going to return an empty array

44
00:02:51,150 --> 00:02:58,340
if the item the key value pair of cards does not exist within the local storage.

45
00:02:58,500 --> 00:03:04,980
If it does exist then we're just going to get whatever values we have currently within a local storage.

46
00:03:04,980 --> 00:03:07,040
So then let's head over back to our function.

47
00:03:07,240 --> 00:03:08,710
Then like I said we're going to return.

48
00:03:09,090 --> 00:03:13,260
And first we're going to check whether the item by the name of card exists.

49
00:03:13,380 --> 00:03:18,190
And for that we have a method of get item and we're checking for the card.

50
00:03:18,310 --> 00:03:22,340
Since we're setting up the ternary operator we're going to have my question mark.

51
00:03:22,380 --> 00:03:30,450
And again we have one of two options if the item with a key value pair of card does not exist in my

52
00:03:30,450 --> 00:03:33,420
local storage then I'm just gonna return an empty array.

53
00:03:33,480 --> 00:03:38,180
So I'm going to have a call and then return the empty array if that item is there.

54
00:03:38,190 --> 00:03:43,310
Well then of course I'm going to look for Jason then we need to use pass.

55
00:03:43,320 --> 00:03:46,380
Remember we string a fight when we were storing it.

56
00:03:46,380 --> 00:03:53,730
So let's write pass and then we're gonna pass the local storage get item and then we're using the same

57
00:03:53,730 --> 00:03:54,170
method.

58
00:03:54,390 --> 00:03:56,790
And we're looking for the same key.

59
00:03:56,790 --> 00:03:59,080
So we're looking for our card key.

60
00:03:59,280 --> 00:04:05,580
And once I set up my function I just need to make sure to replace the empty card value that I have here

61
00:04:05,910 --> 00:04:13,050
the empty array for my function somewhere safe get a card from local storage and I'm going to invoke

62
00:04:13,050 --> 00:04:13,970
my function.

63
00:04:14,070 --> 00:04:20,820
Now in this case each and every time we're going to update our key in a local storage when we're going

64
00:04:20,820 --> 00:04:23,560
to refresh we're gonna get the latest values.

65
00:04:23,610 --> 00:04:26,970
So let's head over back to our application and refresh.

66
00:04:27,060 --> 00:04:29,760
Let's head over to products a product.

67
00:04:29,880 --> 00:04:31,370
This guy's added to the card.

68
00:04:31,440 --> 00:04:34,760
The moment we refresh the page we still get that info.

69
00:04:34,770 --> 00:04:39,570
The reason for that is now once we load up our component we're checking.

70
00:04:39,570 --> 00:04:42,200
Is there a key by the name of card.

71
00:04:42,270 --> 00:04:43,010
If it is.

72
00:04:43,140 --> 00:04:44,780
Then get me those values.

73
00:04:44,900 --> 00:04:50,010
And I'm not going to go through and have more items but hopefully you can see that our functionality

74
00:04:50,040 --> 00:04:50,730
is working.