XQA
Back to Java
2026-02-155 min read

HTML Web Storage (Java)

Learn HTML Web Storage (Java) step by step with clear examples and exercises.

Why This Matters

The introduction of HTML5's Web Storage API has revolutionized client-side data storage, offering a more efficient and flexible alternative to traditional methods like cookies. By understanding and utilizing this technology, developers can build web applications that store large amounts of user data persistently on the user's computer, even after the browser is closed and reopened. This lesson aims to guide you through using the Web Storage API with Java, specifically focusing on JavaScript embedded within an HTML page.

Prerequisites

Before delving into the core concept, it is crucial to have a strong foundation in the following topics:

  1. Basic understanding of HTML and CSS
  2. Familiarity with DOM manipulation and JavaScript
  3. Knowledge of browser APIs and web technologies
  4. Understanding of cookies and their limitations

Core Concept

The Web Storage API provides two storage objects, sessionStorage and localStorage, that allow you to store key-value pairs. The primary difference between the two is that data stored in sessionStorage will be cleared when the browser window is closed, while data stored in localStorage persists even after the browser is closed and reopened.

Storing Data

To store data using the Web Storage API, you can use the following methods:

  • setItem(key, value): stores the specified key-value pair
  • getItem(key): retrieves the value associated with the specified key
  • removeItem(key): removes the key-value pair associated with the specified key
  • clear(): removes all stored key-value pairs

Here's an example of how to store data using JavaScript within an HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Web Storage Example</title>
</head>
<body>
<h1>Web Storage Example</h1>
<button id="storeData">Store Data</button>
<script>
document.getElementById("storeData").addEventListener("click", function() {
localStorage.setItem("name", "John Doe");
localStorage.setItem("age", "30");
localStorage.setItem("city", "New York");
});
</script>
</body>
</html>

In this example, we have a simple HTML page with a button that, when clicked, stores the name, age, and city as key-value pairs in localStorage.

Retrieving Data

To retrieve data stored using the Web Storage API, you can use the getItem(key) method:

<script>
document.getElementById("storeData").addEventListener("click", function() {
localStorage.setItem("name", "John Doe");
localStorage.setItem("age", "30");
localStorage.setItem("city", "New York");

// Retrieve data
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
var city = localStorage.getItem("city");

console.log(name); // John Doe
console.log(age); // 30
console.log(city); // New York
});
</script>

Worked Example

Let's create a simple web application that stores and retrieves user data using the Web Storage API:

  1. Create an HTML file named web_storage.html with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Web Storage Example</title>
</head>
<body>
<h1>Web Storage Example</h1>
<form id="userForm">
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="age">Age:</label>
<input type="number" name="age" id="age"><br>
<label for="city">City:</label>
<input type="text" name="city" id="city"><br>
<button type="submit">Save Data</button>
</form>
<script>
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission

var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var city = document.getElementById("city").value;

localStorage.setItem("name", name);
localStorage.setItem("age", age);
localStorage.setItem("city", city);

alert("Data saved successfully!");
});
</script>
</body>
</html>
  1. Open the HTML file in a web browser and enter some data. The data should be saved even after refreshing the page or closing the browser.
  1. To retrieve and display the stored data, add the following JavaScript code to your HTML file:
<script>
// Retrieve data
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
var city = localStorage.getItem("city");

document.write("<h2>Stored Data:</h2>");
document.write("<p>Name: " + name + "</p>");
document.write("<p>Age: " + age + "</p>");
document.write("<p>City: " + city + "</p>");
</script>

Now, the stored data will be displayed after entering and saving some data.

Common Mistakes

  1. Not using quotes around string values: Always use quotes (single or double) when storing strings in the Web Storage API.
  2. Forgetting to retrieve data: Make sure to retrieve data from localStorage or sessionStorage after storing it, especially if you plan on displaying it on the page.
  3. Confusing sessionStorage and localStorage: Be aware of the differences between sessionStorage and localStorage, as they have different lifetimes for stored data.
  4. Storing sensitive data: Avoid storing sensitive data like passwords or API keys in the Web Storage API, as it can be accessed by malicious users.
  5. Ignoring browser compatibility: Some older browsers may not support the Web Storage API, so make sure to test your application on various browsers and devices.

Practice Questions

  1. Write JavaScript code to store a user's favorite color in localStorage when they click a button labeled "Save Color".
  2. Write JavaScript code to retrieve the stored user's favorite color from localStorage and display it on the page.
  3. Modify the example provided earlier to use sessionStorage instead of localStorage. What happens when you refresh the page?
  4. Implement a simple login system using the Web Storage API that stores the username and password as key-value pairs in localStorage. Verify the entered credentials against stored values before allowing access to the application.

FAQ

  1. Why should I use the Web Storage API instead of cookies? The Web Storage API offers several advantages over cookies, such as larger storage capacity, better performance, and improved security.
  2. Can I store complex data structures like arrays or objects in the Web Storage API? No, the Web Storage API only supports storing simple key-value pairs. If you need to store more complex data, consider using IndexedDB or another client-side storage solution.
  3. How can I determine the size of the stored data in the Web Storage API? You can use the length property of the localStorage or sessionStorage objects to get an estimate of the total size of stored key-value pairs. However, keep in mind that this value may not be accurate due to differences in encoding and compression.
  4. How secure is the data stored in the Web Storage API? While the data stored in the Web Storage API is not encrypted by default, it is still relatively secure compared to cookies since it is not sent with every HTTP request. To improve security, consider using encryption or hashing techniques when storing sensitive data.
  5. Can I use the Web Storage API with AJAX requests? Yes, you can use the Web Storage API in conjunction with AJAX requests to store and retrieve data asynchronously. Just make sure to handle any potential issues related to browser compatibility and security.
HTML Web Storage (Java) | Java | XQA Learn