PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE

Sorry, this video is only available to Pro accounts.

Upgrade your account to get access to all content.

HTML 5 Storage

Created on August 25th, 2017

Tony Lea tnylea

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>
share on facebook share on twitter share via email

Comments (0)

loading comments