DEV Community

DIWAKARKASHYAP
DIWAKARKASHYAP

Posted on • Edited on

1 1 1 1 1

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay