Login to Finish Watching
Howdy, this video is free to watch, but you need to login first :)
Login to Continue WatchingSorry, this video is only available to Subscribers
8 minutes and 40 seconds
HTML 5 Storage Favorite
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:
- Set a Storage Item
- Get a Storage Item
- 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>
Watch. Learn. Create.
Cheers Friend!
Share This Video: