Example 1
Code: Select all
<!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>Example 2
Code: Select all
<!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>