Web Storage API

HTML5 Web Storage (localStorage and sessionStorage) lets you store key-value data in the browser without cookies. localStorage persists forever (until cleared); sessionStorage clears when the tab closes. Both store up to 5-10MB per origin — far more than cookies' 4KB limit.

30 min•By Priygop Team•Last updated: Feb 2026

localStorage vs sessionStorage vs Cookies

localStorage — Persists forever across sessions. 5-10MB. Not sent to server. Same-origin only
sessionStorage — Cleared when tab/window closes. 5-10MB. Isolated per tab. Good for temp data
Cookies — Sent with every HTTP request. 4KB limit. Can set expiration. Used for authentication tokens
All store strings only — use JSON.stringify() to store objects, JSON.parse() to retrieve
Same-origin policy — storage is isolated per protocol + domain + port
No encryption — never store sensitive data (passwords, tokens) in Web Storage

Web Storage Code

Example

// localStorage — persists forever
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

const user = localStorage.getItem('username'); // 'Alice'
localStorage.removeItem('username');
localStorage.clear(); // removes everything

// Storing objects (must serialize)
const settings = { theme: 'dark', fontSize: 16, language: 'en' };
localStorage.setItem('settings', JSON.stringify(settings));
const saved = JSON.parse(localStorage.getItem('settings'));

// sessionStorage — cleared on tab close
sessionStorage.setItem('cartTotal', '49.99');

// Listen for storage changes (cross-tab sync)
window.addEventListener('storage', (event) => {
  console.log(`Key: ${event.key}`);
  console.log(`Old: ${event.oldValue}`);
  console.log(`New: ${event.newValue}`);
});

Try It Yourself: Theme Switcher

Try It Yourself: Theme SwitcherHTML

HTML Editor

✓ ValidTab = 2 spaces

<style>
  body { font-family: Arial, sans-serif; padding: 20px; transition: all 0.3s; }
  .card { padding: 30px; border-radius: 16px; max-width: 400px; margin: auto; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
  button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin: 8px; font-weight: bold; }
  .dark { background: #1a1a2e; color: #e0e0e0; }
  .dark .card { background: #16213e; }
  .dark button { background: #e94560; color: white; }
  .light { background: #f0f4f8; color: #333; }
  .light .card { background: white; }
  .light button { background: #E44D26; color: white; }
  #counter { font-size: 3em; font-weight: bold; margin: 20px 0; }
</style>

<body class="light" id="body">
<div class="card">
  <h2>🎨 Theme & Counter</h2>
  <p>Uses localStorage — refresh and your data persists!</p>
  <div>
    <button onclick="setTheme('light')">☀️ Light</button>
    <button onclick="setTheme('dark')">🌙 Dark</button>
  </div>
  <div id="counter">0</div>
  <button onclick="changeCount(1)">+1</button>
  <button onclick="changeCount(-1)">-1</button>
  <button onclick="resetCount()">Reset</button>
</div>
<script>
  function setTheme(t) {
    document.getElementById('body').className = t;
    localStorage.setItem('theme', t);
  }
  function changeCount(n) {
    let c = parseInt(localStorage.getItem('count') || '0') + n;
    localStorage.setItem('count', c);
    document.getElementById('counter').textContent = c;
  }
  function resetCount() {
    localStorage.setItem('count', '0');
    document.getElementById('counter').textContent = '0';
  }
  // Load saved state
  const saved = localStorage.getItem('theme');
  if (saved) setTheme(saved);
  document.getElementById('counter').textContent = localStorage.getItem('count') || '0';
</script>
</body>

<body class="light" id="body">
<div class="card">
  <h2>🎨 Theme & Counter</h2>
  <p>Uses localStorage — refresh and your data persists!</p>
  <div>
    <button onclick="setTheme('light')">☀️ Light</button>
    <button onclick="setTheme('dark')">🌙 Dark</button>
  </div>
  <div id="counter">0</div>
  <button onclick="changeCount(1)">+1</button>
  <button onclick="changeCount(-1)">-1</button>
  <button onclick="resetCount()">Reset</button>
</div>
<script>
  function setTheme(t) {
    document.getElementById('body').className = t;
    localStorage.setItem('theme', t);
  }
  function changeCount(n) {
    let c = parseInt(localStorage.getItem('count') || '0') + n;
    localStorage.setItem('count', c);
    document.getElementById('counter').textContent = c;
  }
  function resetCount() {
    localStorage.setItem('count', '0');
    document.getElementById('counter').textContent = '0';
  }
  // Load saved state
  const saved = localStorage.getItem('theme');
  if (saved) setTheme(saved);
  document.getElementById('counter').textContent = localStorage.getItem('count') || '0';
</script>
</body>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|46 lines|1820 chars|✓ Valid syntax

UTF-8

Quick Quiz: Web Storage

Web Storage API

30 min•By Priygop Team•Last updated: Feb 2026

localStorage vs sessionStorage vs Cookies

localStorage — Persists forever across sessions. 5-10MB. Not sent to server. Same-origin only

sessionStorage — Cleared when tab/window closes. 5-10MB. Isolated per tab. Good for temp data

Cookies — Sent with every HTTP request. 4KB limit. Can set expiration. Used for authentication tokens

All store strings only — use JSON.stringify() to store objects, JSON.parse() to retrieve

Same-origin policy — storage is isolated per protocol + domain + port

No encryption — never store sensitive data (passwords, tokens) in Web Storage

Web Storage Code

Example

// localStorage — persists forever
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

const user = localStorage.getItem('username'); // 'Alice'
localStorage.removeItem('username');
localStorage.clear(); // removes everything

// Storing objects (must serialize)
const settings = { theme: 'dark', fontSize: 16, language: 'en' };
localStorage.setItem('settings', JSON.stringify(settings));
const saved = JSON.parse(localStorage.getItem('settings'));

// sessionStorage — cleared on tab close
sessionStorage.setItem('cartTotal', '49.99');

// Listen for storage changes (cross-tab sync)
window.addEventListener('storage', (event) => {
  console.log(`Key: ${event.key}`);
  console.log(`Old: ${event.oldValue}`);
  console.log(`New: ${event.newValue}`);
});

Try It Yourself: Theme Switcher

Try It Yourself: Theme SwitcherHTML

HTML Editor

✓ ValidTab = 2 spaces

<style>
  body { font-family: Arial, sans-serif; padding: 20px; transition: all 0.3s; }
  .card { padding: 30px; border-radius: 16px; max-width: 400px; margin: auto; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
  button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin: 8px; font-weight: bold; }
  .dark { background: #1a1a2e; color: #e0e0e0; }
  .dark .card { background: #16213e; }
  .dark button { background: #e94560; color: white; }
  .light { background: #f0f4f8; color: #333; }
  .light .card { background: white; }
  .light button { background: #E44D26; color: white; }
  #counter { font-size: 3em; font-weight: bold; margin: 20px 0; }
</style>

<body class="light" id="body">
<div class="card">
  <h2>🎨 Theme & Counter</h2>
  <p>Uses localStorage — refresh and your data persists!</p>
  <div>
    <button onclick="setTheme('light')">☀️ Light</button>
    <button onclick="setTheme('dark')">🌙 Dark</button>
  </div>
  <div id="counter">0</div>
  <button onclick="changeCount(1)">+1</button>
  <button onclick="changeCount(-1)">-1</button>
  <button onclick="resetCount()">Reset</button>
</div>
<script>
  function setTheme(t) {
    document.getElementById('body').className = t;
    localStorage.setItem('theme', t);
  }
  function changeCount(n) {
    let c = parseInt(localStorage.getItem('count') || '0') + n;
    localStorage.setItem('count', c);
    document.getElementById('counter').textContent = c;
  }
  function resetCount() {
    localStorage.setItem('count', '0');
    document.getElementById('counter').textContent = '0';
  }
  // Load saved state
  const saved = localStorage.getItem('theme');
  if (saved) setTheme(saved);
  document.getElementById('counter').textContent = localStorage.getItem('count') || '0';
</script>
</body>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|46 lines|1820 chars|✓ Valid syntax

UTF-8

Web Storage API

localStorage vs sessionStorage vs Cookies

Web Storage Code

Try It Yourself: Theme Switcher

Quick Quiz: Web Storage

Topics in This Module

Web Storage API

localStorage vs sessionStorage vs Cookies

Web Storage Code

Try It Yourself: Theme Switcher

Quick Quiz: Web Storage

Topics in This Module