First, questions - why do local storage and session storage exist? What problem do they aim to solve?
Imagine you're browsing an online shopping website like Amazon for example, and you have put some items in your shopping cart. As you surf around, you add even more items to your cart and you might even log in to your account.
Now, imagine if every time you refreshed the webpage or navigated to a different page on the website, your shopping cart and login status disappeared, like magic! That would be frustrating, right? This is because web pages, by default, forget things as soon as you leave or refresh them due to the stateless nature of the HTTP protocol.
Here's where local and session storage comes in to solve this problem.
Local Storage: Think of it like a small storage space in your computer's browser. You can put things in there, like your shopping cart items. Even if you close the browser or shut down your computer, those things stay there until you decide to take them out.
Session Storage: Imagine this as a temporary storage space. It's like having a tray while you're shopping in a store. You can put items in your tray while you're in the store (or using the website), and they'll stay there as long as you're in the store. But as soon as you leave (close the website or browser), the tray gets emptied.
Further down this article, we explore the differences between local and session storage but for now, it is simple enough to know that local and session storage are like little memory spaces in your web browser, helping websites remember things for you, so you don't lose important data every time you click a link or refresh the page.
Locate the data storage Panel in your browser,
Navigate to your browser developer tools
In the developer panel, navigate to
application
On the left-hand side, you can see your local and session storage panels
Awesome!
Now you know why these storages exist, the problem they aim to solve and even how to locate them on your browser!
Let's examine some of their differences; When should you use one vs the other
| Aspect | Local Storage | Session Storage |
| Lifespan | has a longer lifespan | has a shorter lifespan |
| - Persists until explicitly removed | - clears when the session ends | |
| - survives browser restart | - automatically clears on tab close | |
| Scope | Scoped to domain or origin | Scoped to domain or origin |
| - Accessible across browser sessions | - Limited to the current tab or window | |
| - Accessible from multiple pages | - Not accessible from other tabs | |
| Use-case | often used for storing persistent settings, user preferences, and data that should persist across browser sessions. | useful for storing temporary data that is only needed for the current session |
In simple terms, local storage keeps things even after you've closed your browser and opened it again, while session storage only keeps things for as long as you're actively using the website. They help websites remember your preferences, items in your cart, or even your login status, making your online experience much more convenient.
Using the shopping cart analogy, here are some examples of information you might want to store on the local storage vs. session storage:
localStorage:
User's shopping cart. This ensures that even if the user closes their browser and returns to the online store later, their cart items are still there.
Storing data related to the checkout process, such as the user's shipping address or payment details. It allows users to resume their checkout process even if they leave the site and return later.
sessionStorage:
- Storing preferences that should apply only during the current session (e.g. temporarily changing the language or font size)
Note: local and session storage are memory spaces in your web browser, helping websites remember things for you, so you don't lose important data every time you click a link or refresh the page. Remember that the choice between localStorage and sessionStorage depends on your specific use case and the desired behaviour for your web application.
Basic code Sample of how to use localStorage:
// Storing data in localStorage
localStorage.setItem('key', 'value');
// Retrieving data from localStorage
const data = localStorage.getItem('key');
// Removing data from localStorage
localStorage.removeItem('key');
And here's a similar example for sessionStorage:
// Storing data in sessionStorage
sessionStorage.setItem('key', 'value');
// Retrieving data from sessionStorage
const data = sessionStorage.getItem('key');
// Removing data from sessionStorage
sessionStorage.removeItem('key');
Finally, Security: Use data storage wisely
When using client-side data storage mechanisms like localStorage and sessionStorage, there are several security trade-offs to consider such as: data exposure, data theft and tampering. Here are some ways to mitigate these risks:
Avoid Storing Sensitive Information: Do not store sensitive information like passwords, API keys, or confidential user data in client-side storage. Use more secure mechanisms, such as HttpOnly cookies or secure server-side storage, for sensitive data.
Implement Encryption: If necessary, encrypt sensitive data before storing it in client-side storage. This adds an extra layer of protection.
Set Secure HTTP Headers: Configure secure HTTP headers, such as Content Security Policy (CSP) and Cross-Origin Resource Sharing (CORS), to control which domains can access your client-side storage.
Use HTTPS: Serve your web application over HTTPS to secure data transmission between the client and server and prevent man-in-the-middle attacks.
Regularly Review Code: Perform code reviews to identify and fix potential security vulnerabilities, including XSS vulnerabilities that could compromise client-side storage.
Clear Data When No Longer Needed: Remove data from client-side storage when it is no longer needed to minimize the potential impact of data breaches.
Happy coding 🥑