/    /  HTML Web Storage

HTML Web Storage

 

web storage and web applications can store data locally within the user’s browser.

Before HTML5, application data had to be stored in cookies, included in each server request. Web storage is most secure, and large amounts of data can be stored locally, without any affecting website performance.

The storage limit is far larger (at least 5MB) and information is never transferred to the server side.

 

There are two types of web storage

 

Local storage:

 

The local storage uses the Windows.localStaorage object to store data for your entire website on a permanent basis. That means the stored local data will be available on the next day, next week, or the next year unless you remove it.

 

Session storage:

 

The session storage provides the sessionStorage object to store data on a temporary basis, for a single browser window or tab. The data disappears when the session ends i.e. when the user closes that browser window or browser tab.

 

The localStorage Object:

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Storing Data with HTML5 Local Storage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// Check if the localStorage object exists
if(localStorage) {
       $(document).ready(function() {
             $(".save").click(function() {
                     // Get input name
                     var firstName = $("#firstName").val();

                     // Store data
             localStorage.setItem("first_name", firstName);
                     alert("Your first name is saved.");
             });
             $(".access").click(function() {
                    // Retrieve data
             alert("Hi, " + localStorage.getItem("first_name"));
             });
       });
} else{
   alert("Sorry, your browser do not support local storage.");
  }
  </script>
  </head>
  <body>
    <form>
       <label>First Name: <input type="text" id="firstName"></label>
      <button type="button" class="save">Save Name</button>
      <button type="button" class="access">Get Name</button>
    </form>
</body>
</html>

 

OUTPUT:

 

HTML Web Storage

 

Example explained:

 

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

 

The sessionStorage Object:

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Storing Data with HTML5 Session Storage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// Check if the localStorage object exists
if(localStorage) {
       $(document).ready(function() {
             $(".save").click(function() {
                     // Get input name
                     var lastName = $("#lastName").val();

                     // Store data
             sessionStorage.setItem("last_name", lastName);
                    alert("Your last name is saved.");
             });
             $(".access").click(function() {
                    // Retrieve data
             alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
             });
       });
} else{
   alert("Sorry, your browser do not support local storage.");
  }
  </script>
  </head>
  <body>
    <form>
        <label>Last Name: <input type="text" id="lastName"></label>
      <button type="button" class="save">Save Name</button>
      <button type="button" class="access">Get Name</button>
    </form>
</body>
</html>

 

OUTPUT:

 

HTML Web Storage

 

Tip: The HTML5’s web storage feature is supported in all major modern web browsers like Firefox, Chrome, Opera, Safari, and Internet Explorer 8 and above.