Web Storage

[00:00:00]
>> So web storage, that's localStorage, remember? It's a very simple API. It stores one string per key. Okay, the entries are also strings, but it's a synchronous API. I already said that. Performance issues, and because it's a synchronous API, that's another reason not to use this. It's not available on workers or service workers.

[00:00:22]
So from a service worker, you cannot read or write onto localStorage. That's enough reason these days to not use the API. Okay, so we should try to avoid it. Typically, that's your question. We are going to emulate that simple key value storage with IndexedDB. It's possible, and with a very thin wrapper on top of IndexedDB, you can have a very simple API as well.

[00:00:55]
Okay, make sense? So the API looked like this. We are going to write some code in here in a second, is the same API for localStorage and sessionStorage. What's the difference? Persistence, the sessionStorage leaves only within the browser session, so if you close the browser, everything that was storing session storage in any operation will be cleared out.

[00:01:21]
And localStorage will keep the data forever. Kind of, okay? And it's a very simple API is setItem, key value, getItem key. That's all. You have removeItem, you have clear that clears everything, and that's all. So localStorage will persist data between navigation and browser sessions. Quota is Is typically 5 megabytes per origin, but on WebKit-based browsers, that includes chromium, because I'm not sure if you remember, but chromium [LAUGH] is a fork from WebKit, so they're using UTF-16 for storing strings.

[00:02:03]
I'm not sure if you know what that means, but that 16 is twice 8, so that means that every character in your string is occupying 2 bytes. So when you're storing strings, it's not 5 megabytes, it's kind of half of it. Firefox is using UTF-8, so, okay? So at the end, it's around 2.5 megabytes, so it doesn't look nice.

[00:02:33]
And there are a couple of projects on some browsers, starting from Firefox, that they will start using your quota instead of this alternative quota for local storage, but we're not there yet, okay? Maybe in the future, that limit will be removed, okay? But not now, we're not there yet.

[00:02:54]
SessionStorage, it persist data within a browser session, but that includes page reloads, and page restore. So you are in disney.com, then you go to starwars.com, you go back to disney, it's the same browser session so the data is still there. But I have a question for you. What's a session on mobile?

[00:03:17]
So on your iPhone, on your Android device, what's a browser session? Do you close the browser? When do you close the browser? Safari or Chrome? Do you close them? You press the home button, and what happens there? Are you closing the browser? Are you stopping the session? If you go back to the browser, is it the same session or not?

[00:03:48]
And what happens if I come back tomorrow, is the same session or not? So there is no single answer to that. Which means that the session for a browser makes no more sense in a mobile side. It's not clear what the session is, so that's one sessionStorage is also becoming useless, okay?

[00:04:13]
And the quota is typically between 5 megabytes and 12 megabytes, for some reason, session storage always have more space on some browsers including IE. So by the way, localStorage is available in IE as well, okay? Even in IE6. Okay, so to increase performance, quota and reachability, we are going to use IndexedDB instead of web storage.

[00:04:37]
I think I mentioned that enough times at this point, okay? So if you're using localStorage in your websites, please stop doing that.