HTML Web Storage - Complete HTML Tutorial

💾 What is Web Storage?

Web Storage allows you to store data in the user's browser. It's more secure and can store more data than cookies. There are two types: localStorage (permanent) and sessionStorage (temporary).


<!-- Simple web storage example -->
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="saveName()">Save Name</button>
<button onclick="loadName()">Load Name</button>
<p id="result"></p>

<script>
function saveName() {
    const name = document.getElementById('nameInput').value;
    localStorage.setItem('userName', name);
    document.getElementById('result').innerHTML = 'Name saved!';
}

function loadName() {
    const name = localStorage.getItem('userName');
    document.getElementById('result').innerHTML = 'Hello, ' + name + '!';
}
</script>

Storage Types

🏠

localStorage

Stores data permanently

localStorage.setItem('key', 'value')

⏰

sessionStorage

Stores data for session only

sessionStorage.setItem('key', 'value')

📥

Store Data

Save information

setItem(key, value)

📤

Get Data

Retrieve information

getItem(key)

🔹 localStorage Example

localStorage keeps data even after closing the browser:

<!DOCTYPE html>
<html>
<body>
    <h2>localStorage Demo</h2>
    
    <input type="text" id="textInput" placeholder="Enter some text">
    <button onclick="saveText()">Save</button>
    <button onclick="loadText()">Load</button>
    <button onclick="clearText()">Clear</button>
    
    <p id="output"></p>

    <script>
    function saveText() {
        const text = document.getElementById('textInput').value;
        localStorage.setItem('savedText', text);
        document.getElementById('output').innerHTML = 'Text saved to localStorage!';
    }

    function loadText() {
        const text = localStorage.getItem('savedText');
        if (text) {
            document.getElementById('textInput').value = text;
            document.getElementById('output').innerHTML = 'Text loaded from localStorage!';
        } else {
            document.getElementById('output').innerHTML = 'No saved text found.';
        }
    }

    function clearText() {
        localStorage.removeItem('savedText');
        document.getElementById('textInput').value = '';
        document.getElementById('output').innerHTML = 'Text cleared from localStorage!';
    }

    // Load saved text when page loads
    window.onload = function() {
        loadText();
    }
    </script>
</body>
</html>

🔹 sessionStorage Example

sessionStorage only keeps data for the current session:

<script>
// Save data for this session only
function saveSessionData() {
    sessionStorage.setItem('sessionKey', 'This data will be lost when tab closes');
}

// Get session data
function getSessionData() {
    const data = sessionStorage.getItem('sessionKey');
    console.log(data);
}

// Remove session data
function clearSessionData() {
    sessionStorage.removeItem('sessionKey');
}

// Clear all session storage
function clearAllSession() {
    sessionStorage.clear();
}
</script>

🔹 Storage Methods

Common methods for working with web storage:

// Store data
localStorage.setItem('name', 'John');
localStorage.setItem('age', '25');

// Get data
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');

// Remove specific item
localStorage.removeItem('name');

// Clear all data
localStorage.clear();

// Get number of items
const count = localStorage.length;

// Get key by index
const key = localStorage.key(0);

// Check if storage is supported
if (typeof(Storage) !== "undefined") {
    // Storage is supported
} else {
    // No web storage support
}

🔹 Storing Objects

You can store objects by converting them to JSON:

// Store an object
const user = {
    name: 'John',
    age: 30,
    email: '[email protected]'
};

localStorage.setItem('user', JSON.stringify(user));

// Retrieve the object
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // John

HTML Web Storage API