sessionStorage and localStorage in JavaScript

JavaScript

In this article we will explain how to implement sessionStorage and localStorage in JavaScript. Basically sessionStorage and localStorage in JavaScript are same but little bit different. Both are used to store the data on client’s machine (browser).

sessionStorage – store the data on the browser and data will persist until we close the tab/browser.

localStorage – store the data on the browser and data will persist until we delete the data manually or clear the cache of browser.

sessionStorage in JavaScript

sessionStorage is a web storage object that store the data on the client machine (browser) in the form of key/value pair. We can store up to 5mb data in the sessionStorage. In the sessionStorage, data will persist until we close the browser or tab.

There are some predefined methods in the sessionStorage. Which are as follows:

  • setItem(key, value) – save the data in key/value pair.
  • getItem(key) – get the value by key.
  • removeItem(key) – remove the key with its value.
  • clear() – delete everything data.
  • key(index) – get the key on a given position.
  • length – get number of saved items.
// Save data in sessionStorage
sessionStorage.setItem('key', 'value');
sessionStorage.setItem('name', 'Web Study Point');
OR
sessionStorage.name = 'Web Study Point'

// Get saved data from sessionStorage
sessionStorage.getItem('key');
sessionStorage.getItem('name'); // Web Study Point
OR
sessionStorage.name; // Web Study Point

// Find the number of saved item in sessionStorage
sessionStorage.length; // 1

// Find the key on given position from sessionstorage
sessionStorage.key(0); // name
sessionStorage.key(2); // null

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
sessionStorage.removeItem('name'); // remove the name session

// Remove all saved data from sessionStorage
sessionStorage.clear();

localStorage in JavaScript

localStorage is also a web storage object that store the data on the client machine (browser) in the form of key/value pair. We can store up to 10mb data in the localStorage. In the localStorage, data will persist until we delete the manually or clear the cache of browser.

localStorage has also same predefined methods as sessionStorage. Which are as follows.

  • setItem(key, value) save the data in key/value pair.
  • getItem(key)get the value by key.
  • removeItem(key)remove the key with its value.
  • clear()delete everything data.
  • key(index)get the key on a given position.
  • lengthget number of saved items.
// Save data in localStorage
localStorage.setItem('key', 'value');
localStorage.setItem('url', 'www.webstudypoint.com');
OR 
localStorage.url = 'www.webstudypoint.com'

// Get saved data from localStorage
localStorage.getItem('key');
localStorage.getItem('url'); // www.webstudypoint.com
OR
localStorage.url; // www.webstudypoint.com

// Find the number of saved item in localStorage
localStorage.length; // 1

// Find the key on given position from localStorage
localStorage.key(0); // url
localStorage.key(2); // null

// Remove saved data from localStorage
localStorage.removeItem('key');
localStorage.removeItem('url'); // remove the url from localStorage

// Remove all saved data from localStorage
localStorage.clear();

If you want to see your sessionStorage or localStorage data in your browser then press F12 (google chrome) then go to application tab then you can see localStorage and sessionStorage data.

You can use cookie to store the data on client machine but cookie is the old way to store data in client machine and also need to set the time to expire the cookie from the client’s machine. In cookie, you van store only 4kb data.

Conclusion

So in this article you have seen, how to use sessionStorage and localStorage in JavaScript.

If you want to improve this article or you find anything wrong/incorrect in this article then please leave a message using below comment box.

1 thought on “sessionStorage and localStorage in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

ten − three =