DEV Community

Bharathvaj
Bharathvaj

Posted on • Originally published at bharathvaj.com

2 1 1 1 1

What Happens to sessionStorage When You Duplicate a Tab?

If you’re a developer debugging browser behavior or just curious about how browsers manage memory and storage, you’ve probably asked yourself:

“When I duplicate a tab, what happens to sessionStorage?”

Let’s break it down.

🗂️ What is sessionStorage?

The sessionStorage API allows you to store key-value pairs in a web browser. Unlike localStorage, which persists data until explicitly cleared, sessionStorage is meant to:

  • Persist data only for the duration of the page session
  • Be unique per tab or window
  • Be isolated per origin

Sounds pretty sandboxed, right? But there’s a twist when you duplicate a tab.

🔁 Duplicating a Tab: Not What You Think

When you duplicate a tab (right-click → Duplicate or Ctrl/Cmd + L → Enter), browsers don’t treat this like a fresh session. They actually clone the current tab, including:

  • The DOM state
  • JavaScript memory
  • sessionStorage

Yes, you read that right — sessionStorage is copied into the new tab.

But this is a one-time copy. After duplication, each tab maintains its own version of sessionStorage.

So while both tabs start off with the same session data, changes in one do not reflect in the other.

🔄 Real-Time Sharing? Nope.

Unlike localStorage, which fires a storage event and syncs across tabs from the same origin, sessionStorage does not propagate changes between tabs. Even duplicated ones.

Each tab's sessionStorage becomes independent immediately after duplication.

🧪 Try this: Watching sessionStorage in Action

  1. Open this HTML file in your browser.
  2. Update the value using the input field.
  3. Right-click → Duplicate the tab.
  4. Notice the duplicated tab starts with the same value, but:
  5. Updating the value in one does not change it in the other.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Session Storage Demo</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    input { margin-top: 10px; padding: 5px; }
  </style>
</head>
<body>
  <h1>Session Storage Demo</h1>
  <p>Current value in sessionStorage: <strong id="currentValue">N/A</strong></p>

  <input type="text" id="input" placeholder="Type something..." />
  <button onclick="updateStorage()">Update sessionStorage</button>

  <script>
    const key = "mySessionData";
    const currentValue = document.getElementById("currentValue");
    const input = document.getElementById("input");

    // Initialize value if not set
    if (!sessionStorage.getItem(key)) {
      sessionStorage.setItem(key, "Hello from this tab!");
    }

    // Update display every second
    setInterval(() => {
      const value = sessionStorage.getItem(key);
      currentValue.textContent = value;
    }, 1000);

    // Update sessionStorage on button click
    function updateStorage() {
      sessionStorage.setItem(key, input.value || "No value entered");
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

📊 Quick Summary

Action sessionStorage Copied? Data Synced in Real Time?
Duplicate Tab ✅ Yes ❌ No
Open New Tab Manually ❌ No ❌ No
Refresh Same Tab ✅ Yes ✅ Yes

🧪 Why Does This Matter?

If your app logic depends on sessionStorage for things like:

  • Auth tokens
  • Temporary user state
  • One-time user flows

…then you’ll want to be cautious about assumptions. Duplicated tabs might carry over sensitive state unintentionally.

Happy Coding!!

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →