What is Local Storage in JavaScript? - Coding Torque

 

Local Storage in JavaScript

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:

My Name is Piyush, I am 18 year old, My skills are HTML,CSS,JS,React

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

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights