I need a client side browser database in HTML5. What are my options?

HTML Web Development Front End Technology

The task we are going to perform in this article is about I need a client side browser database in HTML5 what are my options. Before diving into the article let’s have a look.

HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side. The two storages are session storage and local storage and they would be used to handle different situations.

You can use local storage in HTML5 for this purpose. The Local Storage is designed for storage that spans multiple windows and lasts beyond the current session.

Local Storage

The Web storage application programming interface includes a part for HTML5 local storage. It's a technique used by Web pages to locally store named key/value pairs in a user's web browser. Data stored and retrieved in HTML pages from the same domain is often done using local storage.

The local storage uses the localStorage object to permanently store data for your entire website.

localStorage.setItem(key, value) stores the data associated with a key.
localStorage.getItem(key) retrieves the data associated with the key.

For getting better understanding on how local storage was helpful let’s consider the following examples.

Example 1: Using HTML localstorage

In the following example we are using localstroge to store our data in the web without expiration.

<!DOCTYPE html>
<html>
<body>
   <input id="name" type="name" placeholder="enter your name" />
   <button type="submit" onClick="handleClick()">Click</button>
   <br />
   <div id="Varma"></div>
   <script>
      function handleClick() {
         if (typeof Storage !== "undefined") {
            let name = document.getElementById("name").value;
            localStorage.setItem("name", name);
            document.getElementById("Varma").innerHTML =
            "Welcome To Tutorialspoint" + " " + localStorage.name;
         } 
         else {
            alert("Sorry! your browser doesn't support Web Storage");
         }
      }
   </script>
</body>
</html>

On executing the above script, it will generate the output displaying the input field along with a click button. When a user clicks the button after entering the input field, the data gets stored in local storage where there is no validation.

Example 2

Considering the following example we are using localstroge to store our data in the web without expiration.

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<body>
   <script>
      if( localStorage.hits ){
         localStorage.hits = Number(localStorage.hits) +1;
      } 
      else{
         localStorage.hits = 1;
      }
      document.write("Total Hits :" + localStorage.hits );
   </script>
   <p>Refresh the page to increase number of hits.</p>
   <p>Close the window and open it again and check the result.</p>
</body>
</html>

When the script gets executed, it will generate an output consisting of total hits with a prompt. When the user refreshes the webpage, the hit count gets increased and stores the value.