Login to Finish Watching

Howdy, this video is free to watch, but you need to login first :)

Sorry, this video is only available to Subscribers

8 minutes and 40 seconds

Mark as Complete

HTML 5 Storage Favorite

on Aug 25, 2017created byTony Lea

In this video you'll learn how easy it is to use HTML 5 storage. HTML 5 storage makes it super easy to store key/values in your website or your web application. In many cases you may want to use HTML 5 storage instead of cookies or sessions.

We'll teach you how to:

  1. Set a Storage Item
  2. Get a Storage Item
  3. Remove a Storage Item

Below is the code used in the video above:

<!DOCTYPE html>
<html>
<head>
	<title>HTML 5 Storage</title>
</head>
<body>
	<h1 id="name"></h1>

	<input type="text" id="n" name="" placeholder="Enter Your Name">
	<input type="submit" onclick="save()" name="">

	<br>
	<input type="button" onclick="clearName()" value="clear">

	<script>

		if(typeof(Storage) !== 'undefined'){
			setName();
		} else {
			// html 5 storage is not available
		}

		function save(){
			localStorage.setItem('name', document.getElementById('n').value);
			setName();
		}

		function setName(){
			if(localStorage.getItem('name') == null){
				document.getElementById('name').style.display="none";
			} else{
				document.getElementById('name').style.display="block";
				document.getElementById('name').innerHTML = localStorage.getItem('name');
			}
		}

		function clearName(){
			localStorage.removeItem('name');
			setName();
		}

	</script>

</body>
</html>
Related Categories/Tags
DevDojo
Watch. Learn. Create.