Web Storage Practice

[00:00:00]
>> The next step is try to start writing some storage. So, if you look at the Coffee Masters, actually if I add the Black Americano, and then I had an iced coffee as well to my order. The first problem that we have in terms of user experience with these PWA Is that if I refresh my order, my order is gone, okay?

[00:00:25]
So as the first thing that we can do is to use WebStorage that we know that we don't want to, okay. But just in case you wanna see the API, and also, we can replace that WebStorage-based solution with an index DB solution, okay? So, what we're going to do is we're going to apply some techniques from local storage to save the order or the cart, the current contents of the cart in local storage and retrieve that later, okay?

[00:00:58]
That's kind of the idea, so I'm going back to my project, and we are going to work right now with the Order.js module. So, here we have actually the order, we have the cart here and some methods like add, remove, place, render. So, remember this is plain JavaScript, so don't be afraid, okay, it works, of course, later you can convert this PWA into Menu.js, react, wherever you want.

[00:01:32]
So, what we're going to do here, remember that you can follow along also the code that I'm going to write with the companion site as well, I'm going to add here two methods, load and save, okay? So, I'm going to add two methods to my order, so I'm going to save the order and then I'm going to load the order, okay?

[00:01:55]
So this order is actually using JSON Syntax not like static classes, starting members to classes that is not available in every browser. So, I'm trying to stay here because I don't have Webpack, and I'm not passing this through any transpiler, I don't have any of that TypeScript or things like that.

[00:02:17]
What I'm doing here is just staying with ECMAScript 2017, so, that is currently compatible with every browser out there. So, saving is actually pretty simple, I need to take the contents of my card and save it in local storage. It can be session storage as well, but remember that we said that on mobile, the session is like an unclear concept.

[00:02:44]
So maybe we can use local storage and we're going to set an item key value, the key is a string. The value is also a string, so for the key, so I can use card but as I mentioned before, it's a good idea to prefix your storage names.

[00:03:03]
In case in the future, you have more web apps running your remember that everything is shared in that case. So again, I say cm, coffee master's, okay, flashcard, and the cart is actually available in order.cart. The problem is that that's an array, it's an array of objects, it's not in a string.

[00:03:26]
So, every time I'm working with local storage, I must convert everything into a string. So, the simpler way to do that, if you don't have circular references or weird things, is to stringify that option. JSON.stringify will then take that array of objects and give me a string version of that, okay, make sense?

[00:03:54]
I need to find a way to call save, I mean, we could analyze the whole code to understand where to go save. But for now, to make it simple every time we are rendering, for example, there is a render method here, I can call order save, just to simplify this for a second.

[00:04:15]
So, every time there is something to be said like an update in the rendering, I'm going to save as well. It's not the best performance solution right now, but the simplest one for us to understand how to apply a little bit of local storage here. So, now, if I'm going back to my project, I'm refreshing to get the latest version.

[00:04:38]
I'm going to add something to my order and now if I'm going to the application tab in DevTools, within storage, I can open local storage. And I will see an entry here with my origin and luckily, I'd find my key with an array converter as JSON. So, it's saving the data, it's actually pretty simple, okay, to save the data, it's actually pretty simple, any question?

[00:05:14]
It's pretty straightforward, right? So now we need to do the load, okay, so, for the load is like the reverse operation. However we should think about a couple of situations but let's do the reverse operation first. So, I will just say that the Order.cart, do you know what's the opposite of stringify, does anyone know?

[00:05:36]
>> Python parse.
>> Parse, yeah, that's correct, JSON.parse, so I give a string and it will parse it. So, it's localStorage.getItem with the same key. I should put the keys in constants, so I don't have problems but anyway, you get the idea, so, will it work? It will work on some situations but not on all situations, for example, what happens the first time you get into this website?

[00:06:08]
So, there is nothing as cm-cart, so local storage getItem will give you undefined, then JSON.parse of undefined, we don't know what happens, right? We can try, but actually it is going to for sure replace my empty array with something that is not an array. So that's the first problem, okay, that we have with this code, so we should check first if we do have something, okay, there.

[00:06:42]
If it's not undefined, then we are going to do this, but that's not the only problem, so what if we cannot parse this at JSON, why? You say, well, maybe the user is getting here and making an invalid JSON. So now if I'm trying to parse this, it throws an exception, so I should also manage that, how to manage that?

[00:07:12]
Try catch, so I should catch these servers, maybe I don't wanna do anything if there is error. Maybe I should clean this, so I can say localStorage.removeItem because yeah, you know what? It's corrupted, I don't know what happened, okay, but it's not JSON anymore, so, let's remove that and I will stay with my empty array.

[00:07:36]
You can log that in your server if you want, if it's an expected situation that you wanna log, wherever you want, okay, make sense? And after that, what I need, is to call render, yeah here we are calling rendering and rendering is saving again which is again, not per format but we are not right now caring about that.

[00:08:01]
In fact probably as homework at the end of the workshop I have a list of things that you can do to improve this app and one is improving performance here, okay? So, this is not react or angular or view, so this is not reactive programming, so it's not going to detect that the array has changed, and the UI will be updated automatically.

[00:08:25]
So, I'm manually rendering this, so if this works well first now, I have a corrupted JSON, so if I refresh it's going back to an empty array. So, it deleted the data and then it was replaced by an empty array. And if I add to the cart, let me add two Americanos, if I had to Americanos, so if I refresh, I'm still getting an empty array, why?

[00:08:55]
What do you think? Well, let's, let's try to debug this. How can we debug this? What do you think? So, you can use the debugger, we can add breakpoints, okay? So, what's going on here is that if I add this here, it's fine, so it's loading fine. So, we can also go to the console and try here order.load and see what happens.

[00:09:29]
So, now if I see what my card has, it's loading properly, okay, so I do have my Black Americano, do you want to say something?
>> I think that's the answer, right, you need to call load somewhere.
>> We need to call load somewhere, yeah, that's the problem, so we are calling save but we are not loading.

[00:09:51]
So that when I load again it starts with an empty array and that's the only thing we have, so where? Well, here the simplest way to do that, it's just manually here, you can say, can we wait for document content load? We can, but this is a module-based project, so we don't need to do that, actually, okay.

[00:10:16]
So we were actually not calling load, so if I call load manually, it's fine. This is classic web app programming, okay, this was pretty common 15 years ago. Anyway, so, if I refresh now you can see my Black Americano is still there, okay, so if I add a cappuccino, if I refresh, its still there, if I close a tab and open a new tab, my order is still there.

[00:10:47]
But I'm using local storage, well, what's the problem? Well, first the quota is, in fact, let's look at the quota, so if I open my quota, it still says zero. You say why? Because local storage right now at least, it's a separate five megabytes of storage, it's not actually using your quota.

[00:11:07]
Okay, so that's expectable but the worst issue here is performance, we can't actually see the problem in action. But every time we are saving or loading, it's actually using the thread, the main UI thread. So, the parsing and also saving that in the real file system of the browser, everything is synchronous and that's actually a bad idea, okay.

[00:11:33]
So that's why, I mean, the API is pretty simple, it's this one, it's working, but we should try to avoid using this API, make sense? So that's actually everything we are going to cover about WebStorage.