Local Storage and Session Storage in JS
Local Storage and Session Storage are two types of web storage that allow you to store data locally in a user's browser. They are both part of the Web Storage API, which provides a way to store data in a web application. Local Storage and Session Storage are used to store data that can be accessed by a web application, but they have some key differences. Local Storage stores data for a longer period of time, while Session Storage stores data for a shorter period of time. Local Storage is also more secure than Session Storage, as it is encrypted and can only be accessed by the user who created the data. Session Storage, on the other hand, is less secure and can be accessed by anyone who has access to the user's browser.
Example:-
localStorage.setItem("name", "John");
console.log(localStorage.getItem("name")); // "John"
Local Storage API: All Methods
1. localStorage.setItem(key, value)
Stores a value as a string.
If key exists, it will be overwritten.
localStorage.setItem("username", "Ram");
Local Storage API: All Methods
1. localStorage.setItem(key, value)
Stores a value as a string.
If key exists, it will be overwritten.
localStorage.setItem("username", "Ram");
2. localStorage.getItem(key)
Retrieves the value associated with the given key.
Return null if key does not exist.
localStorage.getItem("usernam ");
3. localStorage.removeItem(key)
Removes the value associated with the given key.
Return undefined if key does not exist.
localStorage.removeItem("usernam ");
4. localStorage.clear()
Removes all items from the storage.
localStorage.clear();
5. localStorage.length
Return the number of items in the storage.
6. localStorage.key(index)
Return the key of the item at the specified index in the storage.
Limitations of Local Storage
Only string values allowed (must stringify objects)
5MB storage limit per origin
Shared across all tabs of the same domain
No automatic expiration (unlike cookies or sessionStorage)
What is sessionStorage?
sessionStorage is a property of the Window interface that allows you to store data locally in a user's browser. It is similar to localStorage, but it stores data for a shorter period of time . The data stored in sessionStorage is deleted when the user closes the browser or the tab. It is also less secure than localStorage, as it is not encrypted and can be accessed by anyone who has access to the user's browser.
Example:-
sessionStorage.setItem(" name", "John");
sessionStorage API: All Methods
1. sessionStorage.setItem(key, value)
Stores a value as a string.
If key exists, it will be overwritten.
sessionStorage.setItem(" username", "Ram");
2. sessionStorage.getItem(key)
Retrieves the value associated with the given key.
Return null if key does not exist.
sessionStorage.getItem(" username ");
3. sessionStorage.removeItem(key)
Removes the value associated with the given key.
Return undefined if key does not exist.
sessionStorage.removeItem(" username ");
4. sessionStorage.clear()
Removes all items from the storage.
sessionStorage.clear();
sessionStorage vs localStorage vs cookies
Here is a comparison of the three:
| Feature |
sessionStorage |
localStorage |
Cookies |
| Lifetime |
Tab-close |
Until cleared manually |
Set via expires/max-age |
| Capacity |
~5MB |
~5MB |
~4KB |
| Sent to server? |
No |
No |
Yes |
| Tab-specific? |
Yes |
No (shared across tabs) |
No |
| Auto expire? |
Yes (on tab close) |
No |
Yes |
| Secure storage? |
No |
No |
With HttpOnly |