LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Web Storage


What is Web Storage

The HTML5's web storage feature lets you store some information locally on the user's computer, similar to cookies, but it is faster and much better than cookies. However, web Storage is no more secure than cookies. Please check out the tutorial on PHP cookies to learn more about cookies.

The information stored in the web storage isn't sent to the web server as opposed to the cookies where data sent to the server with every request. Also, where cookies let you store a small amount of data (nearly 4KB), the web storage allows you to store up to 5MB of data.

There are two types of web storage, which differ in scope and lifetime:

  • Local storage — The local storage uses the localStorage object to store data for your entire website, permanently. That means the stored local data will be available on the next day, the next week, or the next year unless you remove it.
  • Session storage — The session storage uses the sessionStorage object to store data on a temporary basis, for a single window (or tab). The data disappears when session ends i.e. when the user closes that window (or tab).

Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.

Browsers Icon

Browsers

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

Basic Support

  • YES
  • YES
  • YES
  • YES
  • YES

Version

  • 3.5
  • 4.0
  • 8.0
  • 4.0
  • 11.5

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

  • window.localStorage - stores data with no expiration date
  • window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Before using web storage, check browser support for localStorage and sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support.
}

The localStorage Object

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Example of HTML5 Local Storage</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
		// 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>

The sessionStorage Object

The sessionStorage object work in the same way as localStorage, except that it stores the data only for one session i.e. the data remains until the user closes that window or tab.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Example of HTML5 Local Storage</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
		// Check if the localStorage object exists
        if(localStorage){
            $(document).ready(function(){
                $(".save").click(function(){
                    // Get input name
                    var firstName = $("#firstName").val();
        
                    // Store data
                    sessionStorage.setItem("first_name", firstName);
                    alert("Your first name is saved.");
                });
                $(".access").click(function(){
                // Retrieve data
                    alert("Hi, " + sessionStorage.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>


x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine