HTML · APIs

localStorage API

Learn how to store data persistently in the browser using localStorage

Find videos you like?

Save to resource drawer for future reference!

What is localStorage?

localStorage is a web storage API that allows you to store key-value pairs in the browser

localStorage provides a simple way to store data that persists even after the browser is closed. It's perfect for storing user preferences, settings, or any data that should survive page refreshes.

Persistent

Data remains even after browser restart

Per Origin

Each website has its own storage

~5-10MB

Storage limit per domain

Basic localStorage Operations

Learn the fundamental methods: setItem, getItem, removeItem, and clear

localStorage CRUD Operations

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>💾 localStorage Demo</h1>
      <div class="input-group">
        <label for="keyInput">Key</label>
        <input type="text" id="keyInput" placeholder="e.g., username" value="username">
      </div>
      <div class="input-group">
        <label for="valueInput">Value</label>
        <input type="text" id="valueInput" placeholder="Enter value to store">
      </div>
      <div class="button-group">
        <button class="btn-save" id="saveBtn">💾 Save</button>
        <button class="btn-load" id="loadBtn">📂 Load</button>
        <button class="btn-remove" id="removeBtn">🗑️ Remove</button>
        <button class="btn-clear" id="clearBtn">🧹 Clear All</button>
      </div>
      <div class="output">
        <div class="output-label">Stored Value:</div>
        <div class="output-value" id="output">No data loaded yet</div>
      </div>
      <div id="messageBox"></div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Storage Events (Cross-Tab Communication)

Listen for changes made to localStorage from other tabs/windows

Storage Event Listener

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Events</title>
  </head>
  <body>
    <div class="container">
      <h1>🔔 Storage Events</h1>
      <p class="subtitle">Open this page in multiple tabs to see storage events in action</p>
      <div class="info-box">
        <strong>💡 How it works:</strong> When one tab changes localStorage, other tabs receive a "storage" event. Try opening this page in 2+ tabs and make changes!
      </div>
      <div class="events-log">
        <div class="log-title">📋 Event Log</div>
        <div id="eventLog">Waiting for storage events...</div>
      </div>
      <button onclick="testChange()">🧪 Trigger Storage Change</button>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Core Methods

Essential localStorage API methods you'll use daily

localStorage.setItem(key, value)

Store a key-value pair

localStorage.getItem(key)

Retrieve value by key

localStorage.removeItem(key)

Delete a specific item

localStorage.clear()

Remove all stored data

Best Practices

Always use try-catch when accessing localStorage (can fail in private browsing)
Store only strings - use JSON.stringify() for objects
Never store sensitive data (passwords, tokens) in localStorage
Check storage quota before storing large amounts of data
Use meaningful, prefixed keys to avoid conflicts

Browser Support

localStorage is supported in all modern browsers (Chrome, Firefox, Safari, Edge) and IE 8+. It's safe to use in production without polyfills.

Previous Topic

Lifecycle Callbacks

connectedCallback, disconnectedCallback, attributeChangedCallback.

Next Topic

Session Storage

sessionStorage for temporary session-based storage.

Ask a Question

Have a question about Local Storage? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · APIs

localStorage API

Learn how to store data persistently in the browser using localStorage

Find videos you like?

Save to resource drawer for future reference!

What is localStorage?

localStorage is a web storage API that allows you to store key-value pairs in the browser

localStorage provides a simple way to store data that persists even after the browser is closed. It's perfect for storing user preferences, settings, or any data that should survive page refreshes.

Persistent

Data remains even after browser restart

Per Origin

Each website has its own storage

~5-10MB

Storage limit per domain

Basic localStorage Operations

Learn the fundamental methods: setItem, getItem, removeItem, and clear

localStorage CRUD Operations

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>💾 localStorage Demo</h1>
      <div class="input-group">
        <label for="keyInput">Key</label>
        <input type="text" id="keyInput" placeholder="e.g., username" value="username">
      </div>
      <div class="input-group">
        <label for="valueInput">Value</label>
        <input type="text" id="valueInput" placeholder="Enter value to store">
      </div>
      <div class="button-group">
        <button class="btn-save" id="saveBtn">💾 Save</button>
        <button class="btn-load" id="loadBtn">📂 Load</button>
        <button class="btn-remove" id="removeBtn">🗑️ Remove</button>
        <button class="btn-clear" id="clearBtn">🧹 Clear All</button>
      </div>
      <div class="output">
        <div class="output-label">Stored Value:</div>
        <div class="output-value" id="output">No data loaded yet</div>
      </div>
      <div id="messageBox"></div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Storage Events (Cross-Tab Communication)

Listen for changes made to localStorage from other tabs/windows

Storage Event Listener

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Events</title>
  </head>
  <body>
    <div class="container">
      <h1>🔔 Storage Events</h1>
      <p class="subtitle">Open this page in multiple tabs to see storage events in action</p>
      <div class="info-box">
        <strong>💡 How it works:</strong> When one tab changes localStorage, other tabs receive a "storage" event. Try opening this page in 2+ tabs and make changes!
      </div>
      <div class="events-log">
        <div class="log-title">📋 Event Log</div>
        <div id="eventLog">Waiting for storage events...</div>
      </div>
      <button onclick="testChange()">🧪 Trigger Storage Change</button>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Core Methods

Essential localStorage API methods you'll use daily

localStorage.setItem(key, value)

Store a key-value pair

localStorage.getItem(key)

Retrieve value by key

localStorage.removeItem(key)

Delete a specific item

localStorage.clear()

Remove all stored data

Best Practices

Always use try-catch when accessing localStorage (can fail in private browsing)
Store only strings - use JSON.stringify() for objects
Never store sensitive data (passwords, tokens) in localStorage
Check storage quota before storing large amounts of data
Use meaningful, prefixed keys to avoid conflicts

Browser Support

localStorage is supported in all modern browsers (Chrome, Firefox, Safari, Edge) and IE 8+. It's safe to use in production without polyfills.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Lifecycle Callbacks

Session Storage

HTML Code Editor

Building Your Learning Module...

localStorage API

Persistent

Per Origin

~5-10MB

localStorage CRUD Operations

Storage Event Listener

Best Practices

Browser Support

Lifecycle Callbacks

Session Storage

HTML Code Editor

localStorage API

Persistent

Per Origin

~5-10MB

localStorage CRUD Operations

Storage Event Listener

Best Practices

Browser Support