HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in the download code for Chapter 12, folder 1.
Here are the steps for saving user data:
1.
Open the
bookings.html
file in your text editor.
2.
Load the
storage.js
file (you create this shortly) into the Bookings page by adding a new
<script>
element just above the closing tag of the
<body>
element.
<script src="js/storage.js"></script>
</body>
3.
Locate the
<form>
element and add an
id
attribute to it with the value
bookings
Form
.
4.
Save and close the
bookings.html
file.
5.
Create a new file in your text editor called
storage.js
and save it in the
js
folder.
6.
Attach an empty function to the
onload
event of the
window
, as you did for the
video.js
file in
Chapter 11.
window.onload = function() {
}
7.
Check that LocalStorage is supported by the user's web browser. To do this, create an
if
statement that
looks for the presence of the
localStorage
object. Remember, lines that start with
//
are comments.
window.onload = function() {
// Check for LocalStorage support.
if (localStorage) {
}
}
8.
Create a new variable called
form
and initialize it by fetching the
<form>
element from your Bookings
page using its ID.
window.onload = function() {
// Check for LocalStorage support.
if (localStorage) {
// Get the form
var form = document.getElementById(“bookingsForm");
}
}
9.
Set up an event listener on the form that is executed when the form is submitted (or the
submit
event is
fired).
// Get the form
var form = document.getElementById(“bookingsForm");
// Event listener for when the bookings form is submitted.
form.addEventListener(“submit", function(e) {
});
