HTML and CSS Reference
Fortunately, we have better options with HTML5: the Web Storage specification. It defines
two window attributes for storing data locally on the client: localStorage and ses-
sionStorage . The localStorage attribute allows you to store data that will persist
on the client machine between sessions. The data can be overwritten or erased only by the
application itself or by the user performing a manual clear down of the local storage area.
The API of the sessionStorage attribute is identical to that of the localStorage
attribute, but sessionStorage won't persist data between browser sessions, so if the
user closes the browser, the data is immediately erased.
You can try sessionStorage in this section by replacing any reference to localSt-
orage with sessionStorage in the listing to come.
In this section, you'll learn
• How to read data from localStorage
• How to write data to localStorage
• How to delete some or all data from localStorage
To implement the management of the application's settings using the Web Storage API and
to integrate the setting functions with the UI, you'll need to follow these four steps:
• Step 1: Read application settings from localStorage.
• Step 2: Save application settings to localStorage.
• Step 3: Clear all settings and data from localStorage.
• Step 4: Connect the UI to localStorage functions.
You need to complete all the steps before you can run and test the code in this section.