HTML Local Storage

Introduction

Local Storage is a feature of the Web Storage API that allows websites to store key-value pairs in a web browser, persisting even after the browser is closed. It is an ideal solution for storing small amounts of data that should remain available across sessions.

Unlike cookies, data stored in Local Storage is not sent with every HTTP request, making it more efficient for storing client-side data such as theme preferences, UI settings, or a shopping cart between visits.

What You’ll Learn

What Is Local Storage?

Local Storage is a part of the browser’s Web Storage API that allows you to store data locally on the user’s computer.

Data stored in Local Storage does not expire unless explicitly removed, making it persistent even when the browser or device is restarted.

It stores data as key-value pairs and is particularly useful for saving user preferences, theme settings, or lightweight app state across visits.

Key Features of Local Storage

• Key-Value Storage — stores data as simple key-value pairs.
• Persistent Storage — data remains available across browser sessions.
• Synchronous API — all operations are synchronous, unlike IndexedDB.
• Limited Size — each domain can typically store up to 5 MB of data.
• No Expiration — data persists until manually deleted by the application or the user.

How to Use Local Storage

Local Storage is easy to use with JavaScript. You interact with it using the localStorage object, which provides methods to store, retrieve, and remove data. The data is stored as strings, so you need to stringify objects before storing them.

The four essential methods mirror sessionStorage:

• localStorage.setItem(key, value) — save a string
• localStorage.getItem(key) — read a string (or null)
• localStorage.removeItem(key) — delete one entry
• localStorage.clear() — delete every key for this origin

Setting Data in Local Storage

To store data in Local Storage, you can use the setItem method. Here’s how you can store a simple key-value pair:

localStorage.setItem('username', 'JohnDoe');

You can also store objects, but since Local Storage only stores strings, you’ll need to use JSON.stringify:

var user = { name: 'JohnDoe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

Retrieving Data from Local Storage

To retrieve data, use the getItem method:

var username = localStorage.getItem('username');
console.log(username); // JohnDoe

If you are retrieving an object, you will need to parse it back into its original form using JSON.parse:

var user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // JohnDoe

Removing Data from Local Storage

If you want to remove a specific item from Local Storage, use the removeItem method:

localStorage.removeItem('username');

All Data in Local Storage

You can clear all the data stored in Local Storage for your domain by using the clear method:

localStorage.clear();

Use clear() carefully—it removes every key your site saved on this origin, not just one feature’s data.

Limitations of Local Storage

• Size Limit — the amount of data you can store is limited (typically around 5 MB per domain).
• Synchronous API — all Local Storage operations are blocking, which may impact performance if used improperly on large values.
• Security Risks — data stored in Local Storage is not encrypted, so sensitive information should not be stored.
• Same-Origin Policy — Local Storage data is accessible only within the same domain and protocol.

localStorage vs sessionStorage

Examples Gallery

Five short examples from basic save/read to a full page with four buttons. Try It Yourself demos use plain HTML with no CSS.

localStorage.setItem('username', 'JohnDoe');
var name = localStorage.getItem('username');
console.log(name); // JohnDoe

JohnDoe

var user = { name: 'Jane', theme: 'dark' };
localStorage.setItem('user', JSON.stringify(user));

var loaded = JSON.parse(localStorage.getItem('user'));
console.log(loaded.theme); // dark

dark

localStorage.setItem('draft', 'hello');
localStorage.removeItem('draft');
console.log(localStorage.getItem('draft')); // null

null

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

theme dark
username Alex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Local Storage Example</title>
</head>
<body>
  <h1>HTML Local Storage Example</h1>
  <button id="save">Save to Local Storage</button>
  <button id="retrieve">Retrieve from Local Storage</button>
  <button id="remove">Remove from Local Storage</button>
  <button id="clear">Clear All Local Storage</button>
  <p id="output"></p>

  <script>
    document.getElementById('save').onclick = function () {
      localStorage.setItem('greeting', 'Hello, World!');
      document.getElementById('output').textContent = 'Data saved!';
    };
    document.getElementById('retrieve').onclick = function () {
      var greeting = localStorage.getItem('greeting');
      document.getElementById('output').textContent =
        greeting ? greeting : 'No data found';
    };
    document.getElementById('remove').onclick = function () {
      localStorage.removeItem('greeting');
      document.getElementById('output').textContent = 'Data removed!';
    };
    document.getElementById('clear').onclick = function () {
      localStorage.clear();
      document.getElementById('output').textContent = 'All data cleared!';
    };
  </script>
</body>
</html>

Hello, World!

🚀 Common Use Cases

• Theme mode — dark/light preference across visits.
• Language or locale — remember UI language choice.
• Shopping cart — hold items between sessions (not for payment secrets).
• Form drafts — autosave long comments or blog posts.
• Onboarding flags — “has seen tutorial” toggle.
• Cross-tab sync — listen for the storage event when another tab writes.

💡 Best Practices