HTML and CSS Reference
In-Depth Information
clear()
To clear all the data stored in your application's datastore, you can use the
clear()
function. This deletes every
key/value pair associated with your application.
Try deleting all the data you have stored up to now. Enter the following into your console window:
localStorage.clear();
Now try to retrieve some data. You should find that the
getItem()
function returns
null
, as shown in Figure
12-4.
Figure 12-4
Using the clear() function to delete all the stored data.
length
You can find out how many key/value pairs have been stored by accessing the
length
property of the
localSt-
orage
object.
Store some key/value pairs and access the length in your console.
localStorage.length;
Note that this is a property, not a function, so it has no parentheses or parameters.
Saving Customer Data from
the Bookings Form
A use case that suits LocalStorage particularly well is saving the data that a user commonly inputs into a web form.
In this section, you use the LocalStorage API to store data from the bookings form on the Joe's Pizza Co. website.
You then add some JavaScript code that attempts to pre-load the form with this stored data when the page loads. Spe-
cifically, you are storing data from the Name, Phone, and Email fields of the form.
