Before we dive into the practical side of things, it's essential to understand what session storage is. Session storage is part of the web storage API. It provides a way for web pages to store data in a user’s browser, similar to cookies. However, unlike cookies, session storage data is deleted as soon as the browser session is closed.
This feature makes session storage particularly useful for temporary data that you don't want to persist beyond the current session. It's also worth noting that session storage is more secure and can hold more data than cookies.
How to Use Session Storage
Now that we understand what session storage is, let's look at how to use it.
Storing data in session storage is simple. You use the
sessionStorage.setItem() method, passing in two arguments: the key and the corresponding value. The key is a string that will be used to retrieve the value later.
Here's an example:
In this example, 'username' is the key, and 'codedamn' is the value.
To retrieve data from session storage, you use the
sessionStorage.getItem() method, passing in the key as an argument.
var user = sessionStorage.getItem('username'); console.log(user); // Outputs: codedamn
If you want to remove data from session storage, you can use the
sessionStorage.removeItem() method, again passing in the key as an argument.
Clearing All Data
Finally, if you want to clear all data from session storage, you can use the
Session Storage vs. Local Storage
Session storage and local storage are part of the same Web Storage API and function similarly. The key difference is that while session storage data is deleted when the browser is closed, local storage data persists across sessions. This difference can significantly impact which type of storage you should use depending on your application's needs.
Session storage is widely supported across all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it's worth noting that session storage is not supported in Internet Explorer 7 and earlier versions.
Q: Is session storage secure?
Q: How much data can session storage hold?
A: Most modern browsers allow you to store between 5MB and 10MB of data in session storage. This is significantly more than cookies, which have a limit of just 4KB.
Q: Can session storage be used across multiple windows or tabs?
A: No, session storage is limited to the window or tab that created it. If you need to share data across multiple windows or tabs, you should use local storage instead.
Q: Is session storage data sent to the server with each request like cookies?
A: No, session storage data is not sent to the server with each request like cookies. This can result in better performance, especially for sites that store a lot of data.
For more details, you can visit the official MDN Web Docs.
Free money-back guarantee
Unlimited access to all platform courses
100's of practice projects included
ChatGPT Based Instant AI Help (Jarvis)
Structured Full-Stack Web Developer Roadmap To Get A Job
Exclusive community for events, workshops
Sharing is caring
Did you like what Mayank Sharma wrote? Thank them for their work by sharing it on social media.
No comments so far
Leave a question/feedback and someone will get back to you