Hello Guys! Welcome to Coding Torque. In this blog, I am going to explain to you about local storage in JavaScript.
The Local storage object is used to save key-value pairs in the user’s browser without any expiration date. It gets cleared only using JavaScript or clearing the browser cache. It is used for storing information on the client side.
Table of contents :
- Difference between sessionStorage and localStorage
- setItem method
- getItem method
- removeItem method
- clear method
- working with objects
What is the difference between sessionStorage and localStorage?
The Web Storage API consists of two mechanisms: sessionStorage and localStorage. Both sessionStorage and localStorage maintain a separate storage area for each available origin for the duration of the page session.
The main difference between sessionStorage and localStorage is that sessionStorage only maintains a storage area while the browser is open (including when the page reloads or restores) while localStorage continues to store data after the browser is closed. This means data stored in the sessionStorage is cleared when the page is closed and data stored in localStorage does not expire.
set item method
This method is used to store values in the local storage. It takes 2 arguments – the first one is the key name and the second is its value. if the key exists the value will be updated.
Example:
localStorage.setItem('name','Piyush') localStorage.setItem('age',18) localStorage.setItem('skills',['HTML','CSS', 'JS', 'React'])
get item method
This method is used to get the values from the local storage. It takes only one argument which is key and returns the value if the key exists.
Example:
const name = localStorage.getItem('name'); const age = localStorage.getItem('age'); const skills = localStorage.getItem('skills').replaceAll(",",",") console.log(`My Name is ${name}, I am ${age} year old, My skills are ${skills}`)
Output:
remove item method
This method takes the key as an argument that is removed from the storage object.
Â
Example:
const name = localStorage.getItem('name'); const age = localStorage.getItem('age'); localStorage.removeItem('skills'); const skills = localStorage.getItem('skills') console.log(`My Name is ${name}, I am ${age} year old, My skills are ${skills}`)
Â
Output:
My Name is Piyush, I am 18 year old, My skills are null
Clear all items
This method removes all items from the local storage.
Â
Example:
localStorage.clear() const name = localStorage.getItem('name'); const age = localStorage.getItem('age'); const skills = localStorage.getItem('skills') console.log(`My Name is ${name}, I am ${age} year old, My skills are ${skills}`)
Output:
My Name is null, I am null year old, My skills are null
Working with objects
Instead of creating separate key/value pairs we can create an object and store it in the local storage, however, this will only work with the help of JSON.
Example:
const profile = {name:'Piyush', age:18, skills:['HTML','CSS','JavaScript']} localStorage.setItem('userProfile',JSON.stringify(profile)) const {name, age, skills} = JSON.parse(localStorage.getItem('userProfile')) console.log(`My Name is ${name}, I am ${age} year old, My skills are ${skills}`)
Output:
My Name is Piyush, I am 18 year old, My skills are HTML,CSS,JavaScript
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖