Prev Next

HTML Web Storage

Web Storage (localStorage and sessionStorage) provides a way to store key-value data in the browser without cookies. localStorage persists data until cleared, while sessionStorage keeps it for the session. This helps maintain user preferences, cart items, or temporary state between page reloads.

Key Topics

Local vs Session Storage

localStorage persists across sessions until cleared. sessionStorage is cleared when the page session ends (usually when tab/window is closed).

Storage API

Use localStorage.setItem('key','value') and localStorage.getItem('key') to interact with data. Similarly for sessionStorage.

Web Storage Example

This example stores and retrieves a username in localStorage. A full code sample is provided below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Storage Example</title>
</head>
<body>
    <input type="text" id="user" placeholder="Enter name">
    <button onclick="saveName()">Save</button>
    <button onclick="showName()">Show</button>
    <p id="display"></p>

    <script>
    function saveName() {
        var val = document.getElementById('user').value;
        localStorage.setItem('username', val);
    }
    function showName() {
        var name = localStorage.getItem('username');
        document.getElementById('display').textContent = name ? 'Hello ' + name : 'No name saved';
    }
    </script>
</body>
</html>

Explanation: The user inputs a name and clicks Save, storing it in localStorage. Clicking Show retrieves and displays it, persisting across page reloads.

Key Takeaways

  • Use localStorage and sessionStorage for client-side data storage.
  • Data persists in localStorage until cleared, sessionStorage until session ends.
  • No cookies needed; simpler API and more space.
  • Useful for preferences, carts, and temporary data states.
  • Check browser support and handle fallback if needed.
Prev Next