What is save data in HTML file?

HTML stands for HyperText Markup Language, and it is the standard language for creating web pages and web applications. HTML files are plain text files that contain tags and elements that define the structure and content of a web page¹.

However, HTML files are not designed to store data permanently. They are static files that only display what is written in them. If you want to save data in HTML file, you need to use some additional technologies, such as web storage, forms, or server-side scripting².

In this article, we will explain what these technologies are, how they work, and how they can help you save data in HTML file.

Web Storage

Web storage is a feature of HTML5 that allows web applications to store data locally within the user’s browser. Web storage is more secure and efficient than cookies, which were the traditional way of storing data on the client side. Web storage can store large amounts of data without affecting the website performance or sending data to the server².

Web storage provides two objects for storing data on the client side: localStorage and sessionStorage².

localStorage

The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next time the user visits the website. The localStorage object can store up to 5 MB of data per origin (per domain and protocol)².

To use the localStorage object, you need to use the following methods:

localStorage.setItem(key, value) - This method stores a key-value pair in the localStorage object. The key and value must be strings.
localStorage.getItem(key) - This method returns the value associated with the given key from the localStorage object. If the key does not exist, it returns null.
localStorage.removeItem(key) - This method removes the key-value pair with the given key from the localStorage object.
localStorage.clear() - This method clears all the data from the localStorage object.

For example, if you want to save the user’s name in the localStorage object, you can use the following code:

<script>
  // Store
  localStorage.setItem("name", "Alice");
  // Retrieve
  document.getElementById("result").innerHTML = localStorage.getItem("name");
</script>

sessionStorage

The sessionStorage object is similar to the localStorage object, except that it stores data for only one session. The data is deleted when the user closes the specific browser tab or window. The sessionStorage object can also store up to 5 MB of data per origin².

To use the sessionStorage object, you need to use the same methods as for the localStorage object, but replace localStorage with sessionStorage.

For example, if you want to count how many times a user has clicked a button in the current session, you can use the following code:

<script>
  // Check if sessionStorage is supported
  if (typeof(Storage) !== "undefined") {
    // Check if sessionStorage.clickcount exists
    if (sessionStorage.clickcount) {
      // Increment sessionStorage.clickcount by 1
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
    } else {
      // Initialize sessionStorage.clickcount to 1
      sessionStorage.clickcount = 1;
    }
    // Display sessionStorage.clickcount
    document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s).";
  } else {
    // Sorry! No Web Storage support..
    document.getElementById("result").innerHTML = "Sorry! Your browser does not support Web Storage.";
  }
</script>

Forms

Forms are another way of saving data in HTML file. Forms allow users to enter and submit data to a web server, where it can be processed and stored. Forms consist of input elements, such as text fields, checkboxes, radio buttons, etc., that collect user input³.

To create a form in HTML file, you need to use the <form> tag, which has two important attributes: action and method. The action attribute specifies where to send the form data when the form is submitted. The method attribute specifies how to send the form data: either using GET or POST³.

GET - The GET method appends the form data to the URL of the action attribute. The GET method is suitable for sending small and non-sensitive data, such as search queries. The GET method has a limit of 2048 characters for the URL length³.
POST - The POST method sends the form data as a separate message to the URL of the action attribute. The POST method is suitable for sending large and sensitive data, such as passwords or files. The POST method has no limit for the data size³.

For example, if you want to create a simple login form that sends the user name and password to a server script called login.php using the POST method, you can use the following code:

<form action="login.php" method="post">
  User name: <input type="text" name="username"><br>
  Password: <input type="password" name="password"><br>
  <input type="submit" value="Login">
</form>

Note that the input elements have a name attribute, which is used to identify the data when it is sent to the server. The input elements can also have other attributes, such as type, value, placeholder, etc., that define the appearance and behavior of the input elements³.

Server-side scripting

Server-side scripting is a technique that allows web servers to dynamically generate HTML files based on user input or other data sources. Server-side scripting can also interact with databases and other web services to store and retrieve data.

To use server-side scripting, you need to use a programming language that can run on the web server, such as PHP, Python, Ruby, etc. You also need to use a special syntax to embed the server-side code in the HTML file, such as <?php ... ?> for PHP, or <% ... %> for ASP.NET.

For example, if you want to create a HTML file that displays the current date and time using PHP, you can use the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Current Date and Time</title>
</head>
<body>
  <h1>Current Date and Time</h1>
  <?php
    // Get the current date and time
    $date = date("Y-m-d H:i:s");
    // Display the date and time
    echo "<p>The current date and time is: $date</p>";
  ?>
</body>
</html>

Note that the PHP code is enclosed in <?php ... ?> tags, which tell the web server to execute the code before sending the HTML file to the browser. The PHP code uses the date() function to get the current date and time in a specified format, and uses the echo statement to display the result in a <p> element.

Conclusion

In this article, we have explained what is save data in HTML file, and how you can use different technologies to achieve this goal. We have covered web storage, forms, and server-side scripting as three main ways of saving data in HTML file. We have also provided some examples of code for each technology.

What is save data in HTML file?