Jaspal S. Codes
LocalStorage vs SessionStorage

LocalStorage vs SessionStorage

Jaspal Singh's photo
Jaspal Singh
·

3 min read

First of all these two are used to store data on the client-side or we can say use these methods to store data in our browser.

LocalStorage

LocalStorage is a part of web storage API which allows us to store the data in the browser in the form of string(JSON) format. It lives on the window object (for example window.localStorage).

Features

  • It persists our data (that is data does not get vanished on page refresh or after closing the browser) as the data never gets expires when stored in local storage. The only way to get rid of data is either via JavaScript or manually via browser (using cache clear/deleting from local storage ).

  • Its storage capacity is more than that of cookies and session storage.

Different Operations and Methods of LocalStorage.

Operations.

  • Write data into localStorage.
  • Read data from localStorage.
  • Delete data from localStorage.

Methods.

Web storage API provides various methods to work with localStorage. Let's have a look at them with examples.

  • setItem(key, value): This method allows us to store the data into localStorage. It accepts two parameters first is key which acts as a unique identifier for the value and the value parameter is the actual value that you want to store into the localStorage.

Working of setItem(key, value)

const user = {
  name: "John Doe",
  age: 12,
  role: "developer"
}

localStorage.setItem("Test_User", JSON.stringify(user))

Output set.PNG

  • getItem(key): getItem() method gives us the ability to retrieve the data from localStorage using the key of the stored data.

Here is how it is done:

const data = localStorage.getItem("Test_User")
console.log(JSON.parse(data))

Output

get.PNG

  • removeItem(key): If you want to get rid of specific data just inject its key as a parameter to the removeItem(key) and boom data is gone now.

Let's do it.

localStorage.removeItem("Test_User")

clear.PNG

  • clear(): This method allows us to delete all the data stored in the localStorage in one go. Use this method wisely as there is nothing like undo here 😉
localStorage.clear()

Data before using clear()

databeforclear.PNG

After using clear()

clearA.PNG

SessionStorage

It is also part of Web Storage API so just like LocalStorage it lives on window object as well (window.sessionStorage()). Unlike LocalStorage data which is stored in sessionStorage get vanished when we close our browser or the tab.

Features

  • It can store data up to 5MB (may vary from browser to browser).
  • It is useful to implement something like a shopping cart.
  • Just like localStorage it is also very easy to use.

Operations.

  • Write data into sessionStorage.
  • Read data from sessionStorage.
  • Delete data from sessionStorage.

Methods.

getItem(key) setItem(key, value) removeItem(key) clear()

As these methods are almost similar to localStorage so we can refer them but I will show the working of one method here 😅

Let's pick getItem

console.log(JSON.parse(sessionStorage.getItem("Test_User")))

Conclusion.

In this blog, we have covered two widely used browser storage methods i.e localStorage and sessionStorage. We should keep in mind that there is no encryption on the data stored in either of these. So, we should not store sensitive information (credit cards, passwords, etc) here.

Thank you 😅. If you find it helpful kindly show some love 😉 Keep Learning Happy Coding.

storageJavaScriptHTML5Browserscoding