DEV Community

Discussion on: Local Storage and Session Storage explained

View post
Collapse
 
loucyx profile image
Lou Cyx •

For folks that might want details about this two types of storage:

localStorage and sessionStorage are functions available globally in the browser and environments such as Deno. The main difference between localStorage and sessionStorage is that localStorage can be used to save and retrieve strings across browser sessions (when the user closes the window/tab or navigates away from your domain), and sessionStorage will be cleared after the session ends. All the following examples use localStorage, but can be done with sessionStorage as well:

// Save the string "a value" in the key "example"
localStorage.setItem("example", "a value");

// Retrieve the saved "a value" from the key "example"
const example = localStorage.getItem("example");
Enter fullscreen mode Exit fullscreen mode

You might want to save more complex types, like for example an object, an array or maybe a number, for that I usually recommend to use JSON.stringify and JSON.parse, which will allow you to save and retrieve said complex types in a string format:

// Save the object `{ foo: "bar" }` in the key "example"
localStorage.setItem("example", JSON.stringify({ foo: "bar" }));

// Retrieve the saved object from the key "example"
const example = JSON.parse(localStorage.getItem("example"));
Enter fullscreen mode Exit fullscreen mode

You might want to retrieve a key that wasn't saved yet, and localStorage.getItem returns null when that happens, so what you can do is use the nullish coalescing operator (??) to have a default:

const username = localStorage.getItem("username") ?? "guest";
Enter fullscreen mode Exit fullscreen mode

You can learn more about localStorage and its methods, in this link, and about sessionStorage in this link.

Cheers!

Collapse
 
juan_patrnguerrero_702b profile image
Juan Patrón Guerrero •

Could you explain what kind of data save in local storage and session storage ?

Collapse
 
loucyx profile image
Lou Cyx •

localStorage is used for all kinds of things:

  • User preferences/settings. You could save them locally to not have to retrieve them constantly, and also update them locally when the user is offline and then sync them once they regain connection.
  • User authentication tokens or session information. Not ideal (cookies might be safer for this particular thing), but there are several apps that do this.
  • Cached data or results of expensive computations. You could for example save in localStorage the last response you got from and endpoint and then when the user goes back to the same view first show the data cached in localStorage and then update it when you get the real response.
  • Other local application state. Any other local state that needs to be saved in the user device.

sessionStorage is used for stuff like...

  • Current user's shopping cart items.
  • Form data across multiple pages or steps.
  • Temporary variables or flags for use within the session.
  • Page-specific data that should not persist beyond the session.

Keep in mind that is useful to use this client side storage solutions, but only when they make sense. Avoid over-using them when you can solve the problem you're dealing with with an in-memory value, form states, and so on.

Cheers!