JSFeeds: anago.io - Web Storage API: localStorage and sessionStorage

Monday, 11 June, 2018 UTC

Web Storage API: localStorage and sessionStorage

Summary

Web Storage API is used to store data in the browser and was introduced in HTML5. It brought us localStorage and sessionStorage. At the first glance, they seem similar. There are some important differences between them though, which is what we will talk about today. You will learn what their use-cases are and how to incorporate them into your code.

Web Storage API

LocalStorage and sessionStorage are a part of Web Storage API. It provides a way to store key/value pairs in the browser. It won’t disappear after refreshing the page. Both localStorage and sessionStorage are an instance of the Storage object.

Object.getPrototypeOf(localStorage) === Storage.prototype // true

If you would like to know more about prototypes, check out my other article: Prototype. The big bro behind ES6 class.

Storage

Since they both localStorage and sessionStorage inherit from the Storage prototype, they share the same set of methods and properties.

Object.getPrototypeOf(localStorage) === Object.getPrototypeOf(sessionStorage) // true

One of the basic functionalities of a storage is saving items. To do it, you need a setItem method. The first argument is the key (the name of the item), and the second one is the value. To retrieve it, you use getItem that needs the key to retrieve the value:

sessionStorage.setItem('dogName', 'Fluffy');
sessionStorage.getItem('dogName'); // 'Fluffy'

After evaluating the code above, open DevTools and go to Application tab. In the Storage section, you can observe that the value was added to the store. An important thing to keep in mind is that it has to be a string: if you want to save an object, you need to stringify it first:

const user = {
  firstName: 'John',
  lastName: 'Smith'
}
sessionStorage.setItem('user', JSON.stringify(user));

Without using

JSON.stringify

, the object would have been changed into a string such as

[object Object]

. If it seems weird, my other article might prove to be helpful to you: [1] + [2] – [3] === 9!? Looking into assembly code of coercion.

You get them as strings also, so remember to parse them into objects again:

const user = JSON.parse(sessionStorage.getItem('user'));

Using setItem with the same key will overwrite the previous value. If you would like to remove it, use removeItem:

sessionStorage.removeItem('user');

To remove all of the stored values, use the clear method:

sessionStorage.clear();

It is also important that both sessionStorage and localStorage are per origin. It means that they will be shared between pages of the same site, but you will not have access to storages used for other sites.

If you try to create your own storage, it will fail. The only instances of Store are localStorage and sessionStorage:

const myStorage = new Storage();
// Uncaught TypeError: Illegal constructor

But how do they differ from each other? Let’s find out!

SessionStorage

An important thing about it is that data stored in sessionStorage gets cleared when the page session ends. Refreshing a page, or going to a different subpage of the same origin will not erase it. Opening a page in a new tab or window will cause a new session to be created with a new storage. For example, go to https://www.reddit.com and open developer tools. Run a piece of code like that:

sessionStorage.setItem('dogName', 'Fluffy');

Then, in the same tab open https://www.reddit.com/r/javascript/ and run:

sessionStorage.getItem('dogName');

It is still there! On the other hand, if you open a new tab and try to get that item, there won’t be any trace of it, because it is a new session.

LocalStorage

Its data is saved across browser sessions and has no expiration date. Due to that, it will be shared between tabs and windows of the same origin. You can easily track that with the

onstorage

event. Go to https://www.reddit.com/r/javascript/ and in the devtools console type:

window.addEventListener('storage', function (e) {
  console.log(`${e.key}: ${e.oldValue} => ${e.newValue}`);
});

Then open a new tab on https://www.reddit.com and type:

localStorage.setItem('dogName', 'Fluffy');

In your previous tab, you will see

dogName: null => Fluffyy

in the console.

Limitations and use cases

Remember that the same origin does not include subdomains. Storage won’t be shared between https://developer.mozilla.org/ and https://www.mozilla.org/

According to the Wikipedia, the current capacity of the Web Storage on Chrome is 10MB, both for localStorage and sessionStorage combined, but this size might differ between browsers.

A good use case of web storage might be for example to store some configuration for the user, even if he is not logged in, such as a color theme. Another might be to check if he has already been on our site. If not, we might show him some tips on how to use our interface. You might feel tempted to save an authorization token in the localStorage, but wait for a second… Any JavaScript code on your page can access the storage. Beware of the Cross-site Scripting! And not only that. If one of your dependencies ever gets infected (and we have a history of such things happening), it might scan your storage looking for sensitive data. There might be a more suitable option for that: cookies. We will cover them in the next article.

Summary

Web Storage API is a feature that might come in handy, but it is not suitable for every situation. It can only store string data, and JSON serialization takes time. It can store only up to a few MB of data, Operations on storage are synchronous, and can’t be used with web workers. The most important thing about them is the fact, that you shouldn’t store any sensitive data inside. If you remember all that, you should be fine, and they might prove to be useful to you.

The post Web Storage API: localStorage and sessionStorage appeared first on Marcin Wanago Blog - JavaScript, both frontend and backend.

Web Storage API: localStorage and sessionStorage was first posted on June 11, 2018 at 7:38 am.
©2018 "Marcin Wanago Blog - JavaScript, both frontend and backend". Use of this feed is for personal non-commercial use only. If you are not reading this article in your feed reader, then the site is guilty of copyright infringement. Please contact me at [email protected]

... more @ anago.io

anago.io