August 12, 2025

Local and Session storage in the browser - Web Platform Feature of the Week

Explore localStorage and sessionStorage techniques for data storage in browsers in this week's newsletter!

Welcome to another Web Platform Feature of the Week. What do you mean I missed an edition last week? Surely you must be mistaken.

Oh, right! I lay the blame for that at the feet of bad planning and the influenza virus. The latter is no more, but I am unsure about potential future disruptions due to the former. Well, to be honest, the latter might also make a comeback. Who knows, this life is unpredictable, which is, sometimes, part of the fun, or so they tell me…

Enough messing about. Onto the show, or newsletter.

Storing data in the browser

There are a few ways we can persist data in the browser, and today I will introduce two of these, namely localStorage and sessionStorage.

While the naming is rather good and makes understanding the two pretty clear, let me give you a quick rundown of the difference.

Both local and session storage are scoped to the current origin, meaning that you cannot access a storage object across different domains.

There is a slight nuance here that is worth knowing about. Should you use window.open and you do not dissallow access to window.opener, the new window or tab could get access to your sessionStorage object but, only if both are on the same domain. For safety sake, always set either the noopener value of the rel attribute on links or pass noopener to window.open. For example: window.open(“another-url”, null, “noopener”);

Session based storage on the other hand is also scoped to the current top-level browsing context. Top-level what now? This is a fancy way of saying the current tab, but I included it here as you may come across the term, and now you know what it is referring to. 🙌

To put it another way, localStorage is sticky and hangs around between browser sessions (closing a tab or the browser) while sessionStorage will dissapear as soon as the top browsing context or the browser itself is closed.

But…

I hate to do this to you but, there is a slight nuance concerning the above as it relates to private browsing. When a user uses your website or web application in private browsing (incognito) mode and they close the browser or the last of the private browsing tabs (some browser intermingle the two in the same window), your localStorage data will be cleared. It is therefore always a good idea to not make assumptions about the precense of data in storage until you have successfully read it.

The Storage API

Because both local and session storage rely on the same underlying Web Storage object, the API for both are exactly the same.

Storing data

To store some data you need to call the setItem function and pass it a key and value. The value must be a string.

localStorage.setItem("theme", "dark");

Wow, only strings? That seems very limiting. This would eb true if it was not for our friend, JSON. If you need to persist an object to storage, you can do so using the stringify function of the JSON API.

const user = {
  name: "Aaron Swartz",
  dob: "November 8, 1986",
  wikipedia: "https://wikipedia.org/wiki/Aaron_Swartz"
}
sessionStorage.setItem("user", JSON.stringify(user));

Reading data

Now that you have some data, you can read it back using getItem passing the key of the storage entry.

localStorage.getItem("theme");

If the key exists, the value will be returned as a string. If it does not, the browser will return null. Following on from our object example above, we can do the following to read it and turn it back into an object:

function getUser() {
  const response = sessionStorage.getItem("user");

  if (!response) {
    return;
  }

  try {
    const user = JSON.parse(response);
    return user;
  } catch (error) {
    throw new Error(
      `Error parsing JSON from sessionStorage: ${error.message}`,
    );
  }
}

const currentUser = getUser();

Manually removing an item

Sometimes you may want to clean up after yourself. To do this, you will use the removeItem function and pass it the key:

localStorage.removeItem("theme");

And if you want to simply sweep everything away, you can use the clear function.

localStorage.clear(); // all gone

Note: There are also the length property and the key function but I have used neither. Perhaps I should someday :)

And that is it for this week. Simple, but a part of the web platform that can be extremely useful. How have you used these in your work? Let me know in the comments on YouTube.

---

The Spotlight

In this episode, I’m spotlighting Open Web Docs, the amazing team behind the quality documentation that powers MDN Web Docs and the open web ecosystem. If you rely on MDN for your dev work, support them — their work is vital for keeping the web accessible, open, and developer-friendly. Learn more at openwebdocs.org.

---

You can find the code on GitHub and a live example is deployed here. You can read more about localStorage, or explore sessionStorage on MDN Web Docs.

---

Find value in the work I do? You can support the work by buying me a coffee. Thank you! ✌️