DEV Community

DIWAKARKASHYAP
DIWAKARKASHYAP

Posted on • Updated on

Local Storage and Session Storage in JS (Javascript) ?

What is Local Storage in Javascript?
Local storage is a part of web APIs that allows you to store data in a web browser in the form of objects( Key-Value pairs )

-local storage is not used cache memory to store data, that's why if you close the browser then local storage data have no effect
-Each URL has its dedicated local storage within the web browser for storing data persistently
-Local storage is mainly used for Client-Side State, Management Remembering User Actions, Session Management, Offline Support

To use Local Storage:

setItem(key, value): This method allows to store Keyand value pair in a web browser

localStorage.setItem('username', 'Diwakar');
Enter fullscreen mode Exit fullscreen mode

getItem(key): This method retrieves the value associated with a specific key from the local storage

const username = localStorage.getItem('username');
console.log(username); // Output: Diwakar
Enter fullscreen mode Exit fullscreen mode

removeItem(key): this method removes the key-value pair associated with the specified from the key local storage

localStorage.removeItem('username');
Enter fullscreen mode Exit fullscreen mode

clear(): This method is used to delete all the local storage associated with the URL

localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

What is Session Storage?

Session storage is similar to Local Storage, the only difference is if you close the browser the data will disappear
-Session storage is use cache memory to store data, that's why if you close the browser then session storage data will disappear
-Each URL has its dedicated session storage within the web browser for storing data persistently just like local storage
-Session storage is mainly used for Multi-Step Processes, Client-Side Caching, State Management, Messaging and Notifications

To use Session Storage:

all main methods Session Storage are same as local storage

setItem(key, value): This method allows to store Keyand value pair in a web browser

localStorage.setItem('username', 'Diwakar');
Enter fullscreen mode Exit fullscreen mode

getItem(key): This method retrieves the value associated with a specific key from the Session storage

const username = localStorage.getItem('username');
console.log(username); // Output: Diwakar
Enter fullscreen mode Exit fullscreen mode

removeItem(key): this method removes the key-value pair associated with the specified from the key Session storage

localStorage.removeItem('username');
Enter fullscreen mode Exit fullscreen mode

clear(): This method is used to delete all the Session storage associated with the URL

localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

Thankyou for reading this blog , please follow me on Twitter, i regularly share blogs and post on react , javascript , web development and opensource contribution

Twitter- https://twitter.com/Diwakar_766

Github- https://github.com/DIWAKARKASHYAP

Top comments (0)