HTML Web Storage Tutorial

HTML Web Storage provides a way to store data in the browser, allowing for better web applications that can retain state between sessions. This tutorial will cover two types of web storage: localStorage and sessionStorage.

1. Introduction to Web Storage

Web Storage is a part of the web platform that allows web applications to store data in the browser. It offers two storage types:

  • localStorage: Stores data with no expiration time. Data is available even after the browser is closed and reopened.
  • sessionStorage: Stores data for the duration of the page session. Data is lost when the page session ends.

2. Using localStorage

The localStorage object allows you to store key/value pairs in a web browser. Here’s how to use it:


<script>
// Storing data
localStorage.setItem('username', 'JohnDoe');

// Retrieving data
var username = localStorage.getItem('username');
console.log(username); // Output: JohnDoe

// Removing data
localStorage.removeItem('username');

// Clearing all data
localStorage.clear();
</script>
This code snippet shows how to set, get, remove, and clear items in localStorage.

Another Example Combining HTML and Javascript for better understanding, the example allows you to input a username, Stor it in Browser localStorage, Retrieving it, Removing it and/or Clearing all data.

<div>
<label for="usernameInput">Enter Username:</label>
    <input type="text" id="usernameInput" placeholder="Enter your username">
    <button id="saveButton">Save Username</button>
</div>
<div>
    <button id="retrieveButton">Retrieve Username</button>
    <button id="removeButton">Remove Username</button>
    <button id="clearButton">Clear All</button>
</div>
<p id="output"></p>

<script>
    // Saving data
    document.getElementById('saveButton').addEventListener('click', function () {
      const username = document.getElementById('usernameInput').value;
      if (username) {
        localStorage.setItem('username', username);
        alert('Username saved!');
      } else {
        alert('Please enter a username!');
      }
    });

    // Retrieving data
    document.getElementById('retrieveButton').addEventListener('click', function () {
      const username = localStorage.getItem('username');
      if (username) {
        document.getElementById('output').innerText = `Retrieved Username: ${username}`;
      } else {
        document.getElementById('output').innerText = 'No username found!';
      }
    });

    // Removing data
    document.getElementById('removeButton').addEventListener('click', function () {
      localStorage.removeItem('username');
      alert('Username removed!');
      document.getElementById('output').innerText = '';
    });

    // Clearing all data
    document.getElementById('clearButton').addEventListener('click', function () {
      localStorage.clear();
      alert('All data cleared!');
      document.getElementById('output').innerText = '';
    });
</script>

3. Using sessionStorage

The sessionStorage object works similarly to localStorage but with session-specific data. Here’s an example:


<script>
// Storing data
sessionStorage.setItem('sessionUser', 'JaneDoe');

// Retrieving data
var sessionUser = sessionStorage.getItem('sessionUser');
console.log(sessionUser); // Output: JaneDoe

// Removing data
sessionStorage.removeItem('sessionUser');

// Clearing all data
sessionStorage.clear();
</script>
This code snippet demonstrates how to use sessionStorage to store and manage data that persists only during the session.

Based on the previous localStorage example, create an example yourself that can handel sessionStorage by combining HTML and Javascript using our Editor.

4. Differences Between localStorage and sessionStorage

Here are the key differences between localStorage and sessionStorage:

Feature localStorage sessionStorage
Persistence Data persists until explicitly deleted Data persists only until the page session ends
Storage Size Usually around 5-10MB Usually around 5-10MB
Scope Accessible from any window/tab Accessible only in the same window/tab

5. Conclusion

HTML Web Storage is a powerful feature that allows developers to store data on the client side, enabling richer and more interactive web applications. By understanding the differences between localStorage and sessionStorage, you can choose the right storage option for your needs.

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.

top-home