Difference between localStorage and sessionStorage?
What is the difference between localStorage and sessionStorage?
Q:- What is localStorage and sessionStorage? Why we use it?
Web Storage objects i.e. - Storage
localStorage and sessionStorage provides us facility to store data locally within the user's browser in key/value pair in string format.
localStorage vs sessionStorage
Key Points:
localStorage and sessionStorage both can be differentiated using the following key points.
- Storage Lcoation – Both are available client-side only.
- Capicity – Default size is 5MB. (vary on some browsers)
- Expire Time – localStorage - Never, sessionStorage - On browser's tab close.
- Accessiblilty – localStorage - From any window/tab, sessionStorage - In same tab only.
- Browsers Support – HTML5 only.
Methods and Properties:
localStorage and sessionStorage both provides same methods and properties.
- setItem(key, value) – store item as key/value pair in string format.
- getItem(key) – get item's value by using key.
- removeItem(key) – remove an item using key.
- clear() – clear or delete everything.
- length – returns total number of stored items.
Q:- How to check browser support localStorage and sessionStorage?
Let's check browser support for localStorage and sessionStorage.
if (typeof Storage !== "undefined") {
console.log("Congrats!, browser supports localStorage and sessionStorage.");
} else {
console.log(
"Sorry!, browser does not supports localStorage and sessionStorage."
);
}
Examples - localStorage and sessionStorage?
// Save data to localStorage
localStorage.setItem('key', 'value');
// Get saved data from localStorage
let data = localStorage.getItem('key');
// Remove saved data from localStorage
localStorage.removeItem('key');
// Remove all saved data from localStorage
localStorage.clear();
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
Q:- Can we store JSON Object into localStorage and sessionStorage?
Yes, You can store it after converting object into string by using JSON.stringify().
let myObj = { 'name': "Full Stack Tutorials", 'age': 30 };
// Save the object into localStorage
localStorage.setItem('myObj', JSON.stringify(myObj));
// Get the object from localStorage
let getObj = localStorage.getItem('myObj');
console.log(JSON.parse(getObj));