Skip to main content

HTML Web Storage (Live Playground)

In this tutorial, we will learn how to use HTML5 Web Storage to store data locally on the user's device. This allows for more efficient web applications that can save data even after the browser is closed.

Overview of Web Storage​

HTML5 introduced the Web Storage API, which provides two mechanisms for storing data locally on the user's device:

  • Local Storage: Stores data with no expiration time. The data remains even after the browser is closed and reopened.

  • Session Storage: Stores data only for the duration of a single browser session. The data is deleted when the session ends, such as when the browser is closed.

Both local storage and session storage use a key-value pair structure, where each piece of data is associated with a unique key.

Accessing Web Storage​

You can access local storage and session storage through the localStorage and sessionStorage objects, respectively. These objects provide methods for storing, retrieving, and deleting data.

Here's a simple example demonstrating how to use local storage:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Web Storage Example</title>
  </head>
  <body>
    <input type="text" id="name" placeholder="Enter your name" />
    <button onclick="saveName()">Save Name</button>
    <p id="greeting"></p>

    <script>
      function saveName() {
        const name = document.getElementById('name').value;
        localStorage.setItem('username', name);
        displayGreeting();
      }

      function displayGreeting() {
        const name = localStorage.getItem('username');
        const greeting = document.getElementById('greeting');
        if (name) {
          greeting.textContent = `Hello, ${name}!`;
        } else {
          greeting.textContent = 'Hello!';
        }
      }

      displayGreeting();
    </script>
  </body>
</html>

In this example, the user can enter their name, and it will be saved to local storage when they click the "Save Name" button. The displayGreeting function retrieves the saved name and displays a greeting message accordingly.

Live Playground, Try it Yourself

Web Storage Limitations​

While Web Storage is useful for storing small amounts of data, it has some limitations:

  1. It can only store string values. To store complex data types like objects or arrays, you need to convert them to JSON strings using JSON.stringify() and then parse them back using JSON.parse().
  2. The storage capacity is limited (usually around 5-10 MB), so it's not suitable for storing large amounts of data.
  3. Web Storage is not secure, as the data can be easily accessed through JavaScript. Therefore, it is not suitable for storing sensitive information.

Despite these limitations, Web Storage is a valuable tool for enhancing the user experience of your web applications by storing data locally on the user's device.