Understanding localStorage, sessionStorage, and Cookies — and How We Built a “Remember Me” Feature

Modern web applications need to maintain state and session continuity to provide a seamless user experience. To manage this "auth state," browsers provide three main storage mechanisms: localStorage, sessionStorage, and Cookies.

In this article, we will decode these storage layers, explore how we built a "Remember Me" feature, and discuss interesting browser behaviors regarding session restoration.

Browser Storage Fundamentals

1. localStorage 💾

localStorage is a mechanism for storing key-value pairs in a web browser with no expiration time.

• Shared across all tabs: Data stored in localStorage is accessible across all tabs and windows of the same origin.
• Persists continuously: The data persists even after the browser is closed and reopened. It stays until explicitly deleted.
• Capacity: Generally allows for 5-10 MB of data.
• Client-side only: Data is not sent to the server with every request.

localStorage.setItem("remember_me", "true"); // Persists until cleared

2. sessionStorage ⏱️

sessionStorage allows you to access a storage area that's unique to a specific browser session.

• Tab-scoped: Data stays within the specific tab where it was created.
• Cleared when tab closes: The data is automatically cleared when the page session ends (i.e., when the tab is closed).
• Survives reloads: Data persists through page reloads and restores.

sessionStorage.setItem("step", "2"); // Available for the duration of the page session

3. Cookies 🍪

Cookies are small blocks of data created by a web server while a user is browsing a website and placed on the user's computer or other device by the user's web browser.

• Sent with requests: Cookies are sent to the server with every HTTP request, making them useful for authentication.
• Expiration: Can be "Session" cookies (expire when the client shuts down) or "Persistent" cookies (expire at a specific date).
• Security: Can be configured with flags like HttpOnly (inaccessible to JavaScript), Secure (HTTPS only), and SameSite (CSRF protection).

Set-Cookie: session_id=abc123; HttpOnly; Secure

---

Designing the "Remember Me" Feature

We implemented a specific behavior for our authentication flow:

1. If "Remember Me" is checked → The user stays logged in even after closing and reopening the browser.
2. If "Remember Me" is UNCHECKED → The user is logged out when the browser is closed.

The Implementation Strategy

We combined two mechanisms:

1. A Session Cookie (no fixed expiry) — Serves as the active session identifier.
2. A remember_me flag in localStorage — Indicates user intent for persistence.

Step 1: On Login

localStorage.setItem("remember_me", "false"); // Stores user preference
document.cookie = "active_session=true; path=/"; // Sets the session cookie

Step 2: On App Initialization

const rememberMe = localStorage.getItem("remember_me");
const hasSessionCookie = document.cookie.includes("active_session=true");

if (rememberMe !== "true" && !hasSessionCookie) {
  logoutUser(); // Clears session if specific criteria aren't met
}

Logic: If the user did not opt for "Remember Me" AND the session cookie is missing (indicating a fresh browser session), the application logs the user out.

Step 3: On Browser Close

Browsers typically clear session cookies when the application closes, handling the cleanup automatically.

---

The Tab Restore Behavior (Cmd + Shift + T) 🔄

An interesting edge case arises with the "Restore Closed Tab" feature found in modern browsers.

If a user unchecks "Remember Me", closes the browser, and then uses Cmd + Shift + T (or Ctrl + Shift + T) to restore the tab, they will often find themselves still logged in.

Why Does This Happen?

Modern browsers treat "Tab Restore" as a continuation of the previous session rather than a fresh start.

• Session cookies are restored.
• Application state is preserved.
• From the application's perspective, the session never actually ended.

Is this a Bug?

No, this is intended behavior. GitLab and other major platforms document this: "Session restoration is considered a trusted continuity signal."

Forcing a logout in this scenario would disrupt the user experience, as the user explicitly requested to restore their previous state.

Is it Acceptable?

Yes.

• Security Check: It typically occurs on the same device and browser instance.
• Industry Standard: It is standard behavior across most modern web applications.
• Mental Model: "Remember Me" controls persistence across fresh starts (cold opens), not session restorations.

---

Key Takeaways

1. localStorage offers persistent storage on the client side.
2. sessionStorage is tied to the lifecycle of a specific tab.
3. Cookies are essential for server-side communication and authentication.
4. "Remember Me" implementations often rely on a combination of persistent flags and session cookies.
5. Tab Restore restores the full state of the session, including session cookies, which is a deliberate browser feature.

Understanding these storage nuances helps in designing robust authentication flows and state management systems.

Happy Coding! 🚀