How can I save HTML locally with JavaScript?

Front End Technology Javascript Web Development

This tutorial teaches us to save HTML locally with JavaScript.

What is local storage?

Local storage means storing content inside your web browser locally. It means it takes space on your computer to store the content rather than storing it on the server of the web application. It is one kind of web API that contains all browsers by default.

Local storage generally stores the application data, user’s secession data, authentication token, and many other things. Before HTML5, developers used cookies to store the HTML content locally, but now every browser has local storage.

Also, cookies only allow storage of a maximum of 4kb of data locally, which is significantly less than local storage. Most browsers allow the storage of 5MB of data locally, which is 1250 times more than the cookies. However, every browser has different capacities to store data locally.

Here, we have explained how users can use the local and session storage to store the HTML content locally.

Using the localStorage object

The local storage object stores the data in the user's browser through the key and value pair. We can create key and value pairs from JavaScript and store them in the local storage. As a value, we can store HTML content such as image content, row HTML content, many more, etc.

Syntax

Users can follow the below syntax to store HTML content locally using the local storage object.

localStorage.setItem ( key, value ); // method to set the content in local storage.
let result = localStroage.getItem( key); // get content from local storage.
localStorage.removeItem( key ): // To remove item from local storage.
localStorage.clear( ); // to clear whole local storage.

Parameters

Key − The local storage maps the key to its value. We can assign any values such as a string for the key. By using the key, we will get the items from the local storage.
Value − It can contain any content such as HTML content or string value that we want to store in the local storage.

Example

The below example demonstrates how we can store the item in local storage and get item from that using the key. Here, we will store the row HTML code in the local storage.

<!DOCTYPE html>
<html>
<head>
   <title> Example -Save HTML locally with JavaScript. </title>
</head>
<body>
   <h2> The localStorage Object. </h2>
   <p> The setItem() method saves data to local storage. </p>
   <div id="output"> </div>
   <script type="text/javascript">
      let output = document.getElementById( "output" );
      let key = "RowHTML";
      let HTMLcontent = " <div style='color: red; font -size:20px;'>TutorialsPoint</div> ";

      // store content to local storage
      let x = localStorage.setItem(key, HTMLcontent);

      // get item from local storage
      let result = localStorage.getItem(key);
      output.innerHTML ="The saved HTML content: " + result;
   </script>
</body>
</html>

In the above example, users can see that we have stored the div element inside the local storage. When we get the div element from the local storage, it prints the above output.

Using the sessionStorage object

The session storage is almost the same as the local storage, but data inside the session storage refreshes whenever you open the browser after closing it. So, when you open the browser, it requests the server to get data again.

Syntax

Users should follow the below syntax for the session storage.

sessionStorage.setItem ( key, value );
let result = sessionStroage.getItem( key);

Parameters

Key − It maps to the value.
Value − It is a content which we want to store in the session storage.

Example

In this example, we will use the sessionStorage to store the stylesheet and icon. Basically, we demonstrates the use of sessionStorage.setItem() and sessionStorage.getItem( ) method with the image HTML content.

<!DOCTYPE html>
<html >
<head>
   <title> Example -Save HTML locally with JavaScript </title>
</head>
<body>
   <h2> The sessionStorage Object </h2>
   <p> Saving HTML content (Home Icon)to the session storage using the session.setItem() method. </p>
   <div id="output"> </div>
   <script type="text/javascript">
   let output = document.getElementById("output");

      // stylesheet for icon
      let key = "styleSheet";

      let styleSheetContet = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">';

      // store content to session storage
      sessionStorage.setItem(key, styleSheetContet);

      // appending style sheet for icon to head
      let style = sessionStorage.getItem(key);
      document.head.innerHTML += (style);

      // store icon to session storage
      sessionStorage.setItem("Icon", '<i class="fa fa-home"></i>')
      let icon = sessionStorage.getItem("Icon");

      // append icon to body
      output.innerHTML = "The saved HTML content: " + icon;
   </script>
</body>
</html>

In the above example, we have stored the style sheet and HTML code for the icon in the session storage. After that, we accessed it from session storage using the getItem() method and style sheet appended to the <head> section and icon to the body section. Users can see the above output for the home icon.

Conclusion

In this tutorial, we have learned 2 methods to save the HTML locally. One is of localStorage, and another is of sessionStorage. The local Storage doesn’t delete data until you don’t delete it manually, and session Storage clears all the data once you close the browser. Both objects are doing the same work but both have different time limits to keep storing the data.