4.5 Add `localStorage` Support

This lesson will have pretty much nothing to do with react or redux. However, it is going to solve the problem that we're going to have moving forward in the development of our application. And that is that right now, every time we refresh the page we have to start our state from the scratch. So we have no decks. So if I go ahead and created a deck, I can display the deck and eventually I'll be able to create cards and study them. However, every time I refresh the page the deck disappears. So how can we fix this problem? Well, the quickest and easiest way right now is to just store our state in local storage. Then there's no need if we do this with redux so let's create a microlibrary that will do this for us. I'm gonna create a new file called src/localStore.js. And in here, we're just gonna export two functions. So let's say, export const getLocalStore and this is going to be a function that simply does JSON.parse. And we're going to parse localStorage.getItem state. Now if localStorage.getItem is empty or return null, JSON.parse. Will return null then and we don't want null, we want undefined. So, let's say or undefined. So that way, if we don't have any state yet we'll just return undefined. Next, let's export another constant which will be setLocalStore and this function will take two parameters. The first one will be the actual state that we want to save, and the second one will be the specific properties from that state that we want to save. Cuz we don't wanna save everything, we don't wanna save the UI or the router state. Instead, we just wanna save the data. Which in our case, will be decks and cards. So what we can do now is let's create a new object called toSave, and that will just be an empty object. And then lets loop over props so we can say, props.forEach, and forEach prop what will do is will set that prop on to save equal to whatever that prop is on the state. And then we can just finish off by saying localStorage.setItem and we can set the state to be JSON.stringify, and will pass in to save. So now, if we come back to our App.js file. Let's go ahead and import star, as we'll just call localStore from localStore. Then down here on line fifteen, where we create our store, we can actually pass an object of state, as the second parameter to store. So let's say, localStore.getLocalStore, and you know what, that function name is too long, let's just change it to get and set. So, if we come back here, we can have localStore.get an localStore.set. That makes much more sense. Okay, so, we have localStore.get. Now, within our run function, here, let's go ahead and actually save this. We're getting our state here, so let's call localStore.set. We'll pass at the set, and we'll pass at an array which has decks and cards. And those are the only two values we care about. That's really all we need to do. We just need to save the state any time it changes and whenever we refresh the page. Get that save state from our local storage. So let's give this a try. If we come back to the browser, let's create a new deck called, one, create a new deck called, two. Refresh the page and you can see that they're both still there. We can actually see our state in the local storage. If we do localStorage.getItem and let's get state, and you can see that we have a deck named one and a deck name two, and an empty cards array. Excellent, so now as we go forward and add more features to this project, we don't have to recreate the stage every time we want to test a new feature.