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•Updated 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

// 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}`);
});

Warning

Never store sensitive data like passwords, API keys, or authentication tokens in localStorage or sessionStorage. Both are accessible via JavaScript — any XSS vulnerability exposes all stored data. Use HttpOnly cookies for session tokens and server-side storage for sensitive information.

Diagram

Loading diagram…

localStorage persists forever; sessionStorage clears when the tab closes

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 (Ctrl+Enter)

HTML|46 lines|1820 chars|✓ Valid syntax

UTF-8

Quick Quiz: Web Storage

Practice Task: Build a Persistent Notes App

Create a simple notes app with a <textarea> and a Save button
On clicking Save, store the textarea content in localStorage with a key like 'myNotes'
On page load, check if 'myNotes' exists in localStorage and pre-fill the textarea with the saved content
Add a Clear button that removes the saved notes from localStorage and empties the textarea
Bonus: Display a 'Last saved: [timestamp]' message using a second localStorage key

Key Takeaways

HTML5 Web Storage (localStorage and sessionStorage) lets you store key-value data in the browser without 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

Topics in This Module

Web Storage API

30 min•By Priygop Team•Updated 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