Store Store in Local Storage

Instructor: [00:00] We now have a simple application, which can store our wish list, and to which we can add items or remove them. However, it's a bit sad that, as soon as we reload it, all our changes are lost. A very simple thing we can do is to at least improve our developer experience by storing the state of the wish list in local storage.

[00:20] To do that, I first extract this initial state we have here to a default initial state. Now, I'm going to check if, in local storage, we have some data present. If that is the case, then I'm simply going to parse the JSON, which is in the local storage, and use that as initial state.

[00:47] Another trick is that we can simply write our state to local storage by, again, using the onSnapshots function from mobx-state-tree. After we created the wish list, we can simply say, onSnapshots, whenever there's a new snapshot available, we're going to write it to our local storage.

[01:07] Since snapshots are basically free to obtain and since they're plain JSON structures, this is enough to preserve the state of our application. It should now be possible to preserve our state changes, even reloads. Now, it loads and the changes are preserved. This should improve our developer experience big time.

[01:31] There's one tricky edge case you probably want to deal with, and that is that the snapshots you have in local storage might, over time, no longer match any more of your model. For example, if a wish list entry has a newly acquired attribute that is not present in the snapshot, then you would get an exception while trying to instantiate that initial state.

[01:55] What we can do is to check whether the shape of our data still suffices for our models. I'm going to store this data temporarily, and I'm simply going to check if this JSON is a valid JSON for our wish list. If it's the case, only then I say the initial state for this application is the state you found in local storage.

[02:19] Now, everything still works the same, but this is just a safety guard, which is quite convenient to have if you change your models a lot. With that, we basically set up a very simple infrastructure to make sure the state of application is captured and stored in local storage.