Interview question: What is the difference between localStorage and sessionStorage?
As a web developer, it's essential to have a solid understanding of the various web storage options available. Two of the most commonly used web storage options are localStorage and sessionStorage. Both offer a way to store data in a user's browser, but there are some crucial differences between the two.
This is a popular question that is often seen in job interviews.
In this article, we will explore the differences between localStorage and sessionStorage, along with some code examples to help you better understand how they work and what you can say in an interview.
Here is a quick outline of what we will cover in this article:
- Introduction
- What is web storage?
- What is localStorage?
- What is sessionStorage?
- How are localStorage and sessionStorage different?
- Persistent data vs. session data
- Shared data vs. isolated data
- Data size limits
- Code examples for localStorage and sessionStorage
- Storing and retrieving data
- Removing data
- Conclusion
- Possible questions
What is web storage?
Before we dive into the differences between localStorage and sessionStorage, let's first understand what web storage is. Web storage is a way for web developers to store data in a user's browser. This data can be accessed and manipulated by the web application without the need for server-side storage or cookies.
There are two types of web storage available: localStorage and sessionStorage. Let's take a closer look at each.
What is localStorage?
localStorage is a type of web storage that allows you to store data in a user's browser for an extended period. Data stored in localStorage is persistent and can be accessed even after the user closes their browser or restarts their computer.
Data stored in localStorage is also shared between all windows and tabs that belong to the same origin (i.e., domain). This means that any changes made to the data in one window or tab will be reflected in all other windows or tabs that access the same data.
What is sessionStorage?
sessionStorage, on the other hand, is a type of web storage that allows you to store data in a user's browser for the duration of a session. A session is defined as the time between when a user opens a browser window and when they close it.
Data stored in sessionStorage is isolated to the window or tab that created it. This means that any changes made to the data in one window or tab will not be reflected in other windows or tabs that access the same data.
How are localStorage and sessionStorage different?
Now that we have a basic understanding of what localStorage and sessionStorage are, let's take a closer look at how they differ.
Persistent data vs. session data
The most significant difference between localStorage and sessionStorage is how long the data is persisted.
Data stored in localStorage is persistent and will remain in the user's browser until it is manually removed. This makes it an excellent option for storing data that needs to persist across sessions or even across devices.
Data stored in sessionStorage, on the other hand, is only available for the duration of the session. Once the user closes their browser window or tab, the data is lost.
Shared data vs. isolated data
Another significant difference between localStorage and sessionStorage is how the data is shared between windows and tabs.
As we mentioned earlier, data stored in localStorage is shared between all windows and tabs that belong to the same origin. This means that any changes made to the data in one window or tab will be reflected in all other windows or tabs that access the same data.
Data stored in sessionStorage, on the other hand, is isolated to the window or tab that created it. This means that any changes made to the data in one window or tab will not be reflected in other windows or tabs that access the same data by key.
Data size limits
Both localStorage and sessionStorage have data size limits, but they differ depending on the browser.
In general, localStorage has a larger data size limit than sessionStorage. The exact limit varies depending on the browser, but it is usually around 5-10 MB.
Data stored in sessionStorage has a smaller data size limit than localStorage. Again, the exact limit varies depending on the browser, but it is usually around 2.5-5 MB.
Code examples for localStorage and sessionStorage
Now that we understand the differences between localStorage and sessionStorage, let's take a look at some code examples to see how they work in practice. Both have similar API.
Storing and retrieving data
To store data, you can use the setItem() method:
localStorage.setItem('name', 'John');
sessionStorage.setItem('name', 'John');
This code will store the string "John" under the key "name".
To retrieve the data, you can use the getItem() method:
const nameLocal = localStorage.getItem('name');
console.log(nameLocal); // Output: John
const nameSession = sessionStorage.getItem('name');
console.log(nameSession); // Output: John
This code will retrieve the string stored under the key "name" and log it to the console.
To remove the data, you can use the removeItem() method:
localStorage.removeItem('name');
sessionStorage.removeItem('name');
Conclusion
In summary, localStorage and sessionStorage are both useful ways to store data in a user's browser. However, they differ in how long the data is persisted, how it is shared between windows and tabs, and the data size limits.
Understanding the differences between localStorage and sessionStorage can help you choose the best option for your web application and ensure that your data is stored and retrieved correctly.
Possible questions
Can localStorage and sessionStorage be accessed across different domains?
No, both localStorage and sessionStorage are limited to the domain that created them.
What happens if I exceed the data size limit for localStorage or sessionStorage?
The data will not be stored, and an error will be thrown.
Can I use localStorage or sessionStorage to store sensitive data?
No, it is not recommended to store sensitive data in either localStorage or sessionStorage, as it can be easily accessed by anyone who has access to the user's browser.
But developers usually store different tokens in localStorage and sessionStorage, like Bearer token.
Can I use both localStorage and sessionStorage in the same web application?
Yes, you can use both localStorage and sessionStorage in the same web application.
Can I access localStorage or sessionStorage from a different browser?
No, the data stored in localStorage and sessionStorage is only accessible from the browser that created it.