There are two main types of browser storages: session and local storage. They both have their own unique benefits and drawbacks that are good to understand.
In this blog post, we will discuss their similarities and differences, as well as when you should use each one.
Similarities between local and session storage
First, let’s start with the similarities.
Both local and session storages are key-value stores, meaning that they both store data in a dictionary format. The value of each key has to be a string, so if you have complex data structures like objects or arrays, you will need to serialize them using JSON strings.
The API between the two is similar as they both extend the Storage interface.
That means that the syntax for getting, setting, and removing data is identical. In both cases you’ll use methods such as Storage.getItem(), Storage.setItem(), Storage.clear(), etc.
They both have a similar size limit, which is around five megabytes. The size limit is imposed by the browser, so it may vary from one browser to another.
Also, they are both scoped to the document origin. That means that two pages with different origins will not be able to access each other’s storage. For example, https://yourtrail.io and http://yourtrail.io will not be able to share local or session storage.
Differences
Their main difference is that local storage data does not expire, whereas session storage data gets cleared when the user closes its browser window.
Page sessions are valid for only one tab at a time. So, if a user has three tabs open, each one will have its own page session.
Since local storage is not session-based, all the data must be deleted via javascript or manually.
When to use local storage
Now let’s see the situations where it would make sense to use local storage. Since local storage exists until explicitly deleted, you can use it for data you want to store long term, even after the user has closed the tab or browser.
For example, if you have a user setting you want to preserve, such as the “remember me” toggle.
Use local storage when you want to share data between tabs or windows. So, if you have a shopping cart on your website and you want the user to be able to access their cart from any tab, you would need to use local storage.
When to use session storage
Since session storage is only valid for one tab, you would use it when you want to store data that should not be accessible from other tabs.
For example, if you have a ticket purchasing flow on your website, you would want to use session storage so that the user can only purchase one ticket per tab, and the two separate ticket purchasing tabs don’t interfere with each other.
Session storage is a good candidate for temporary data that you want to store to improve the user experience or performance of your website.
An example of this is when you have a large form that the user needs to fill out. Say the user navigates away to another page on your website before finishing the form. In this case, you would want to store the data from the form in session storage so you can retrieve the data and pre-fill it the next time the user comes back.
A session store is also handy for storing more sensitive information that you don’t want to keep once the session has ended, such as a login token of a banking application.
Lastly, session storage is another alternative for storing global variables and passing data between pages or nested views.
Since local storage is not window-specific, one tab can overwrite the data that another tab has stored. That can lead to some unexpected behavior, so session storage is a better option in this case.
Conclusion
In conclusion, local storage is best for storing data you want to keep long term, even after the user has closed the tab or browser.
Session storage is best for storing temporary data or data that should only be accessible from one tab.
If you’d like to get more web development, React and TypeScript tips consider
following me on Twitter,
where I share things as I learn them.
Happy coding!
