HtmlConceptBeginner · 3 min read

What is Local Storage in HTML5: Simple Explanation and Example

In HTML5, localStorage is a way for websites to save data directly in your browser that stays even after you close the tab or browser. It stores data as key-value pairs and can hold more information than cookies without sending it to the server.

⚙️

How It Works

Think of localStorage as a small notebook your browser keeps for each website. When you write something in this notebook, it stays there until you erase it, even if you close the browser or turn off your computer. This is different from cookies, which are like notes that get sent back and forth between your browser and the website server.

Technically, localStorage stores data as simple text in pairs of keys and values. For example, you can save a user's name with a key like "username" and the value "Alex". This data is saved only on your device and is not shared with the server unless your website's code sends it explicitly.

This makes localStorage great for saving things like user preferences, themes, or small amounts of data that you want to keep between visits without bothering the server.

💻

Example

This example shows how to save, read, and remove data using localStorage. It saves a user's favorite color, shows it on the page, and lets you clear it.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage Example</title>
</head>
<body>
  <h1>Favorite Color</h1>
  <input type="text" id="colorInput" placeholder="Enter your favorite color">
  <button id="saveBtn">Save Color</button>
  <button id="clearBtn">Clear Color</button>
  <p id="displayColor">No color saved yet.</p>

  <script>
    const colorInput = document.getElementById('colorInput');
    const saveBtn = document.getElementById('saveBtn');
    const clearBtn = document.getElementById('clearBtn');
    const displayColor = document.getElementById('displayColor');

    // Show saved color on page load
    const savedColor = localStorage.getItem('favoriteColor');
    if (savedColor) {
      displayColor.textContent = `Your favorite color is: ${savedColor}`;
    }

    // Save color to localStorage
    saveBtn.addEventListener('click', () => {
      const color = colorInput.value.trim();
      if (color) {
        localStorage.setItem('favoriteColor', color);
        displayColor.textContent = `Your favorite color is: ${color}`;
        colorInput.value = '';
      }
    });

    // Clear saved color
    clearBtn.addEventListener('click', () => {
      localStorage.removeItem('favoriteColor');
      displayColor.textContent = 'No color saved yet.';
    });
  </script>
</body>
</html>

Output

A webpage with a text box, two buttons, and a message area. When you enter a color and click 'Save Color', the message updates to show your saved color. Clicking 'Clear Color' removes the saved color and resets the message.

🎯

When to Use

Local storage is useful when you want to save small amounts of data on the user's device without involving the server. It is perfect for:

Remembering user preferences like themes, font sizes, or language choices.
Saving temporary form data so users don’t lose their input if they refresh the page.
Storing simple game scores or progress in browser games.
Keeping track of items in a shopping cart before checkout.

However, it is not suitable for sensitive data like passwords or large files, and it only works on the user's current browser and device.

✅

Key Points

localStorage stores data as key-value pairs in the browser.
Data persists even after closing the browser or restarting the device.
It is limited to about 5MB of storage per domain.
Data is stored only on the user's device and not sent to the server automatically.
Use it for non-sensitive, small data that improves user experience.

✅

Key Takeaways

localStorage saves data in the browser that stays after closing it.

It stores simple key-value pairs and is easy to use with JavaScript.

Use localStorage for user preferences and small data that improves experience.

Avoid storing sensitive or large data in localStorage.

Data in localStorage is only available on the device and browser where it was saved.