With the information presented in the previous section on how to utilize the localStorage object, let's go ahead and build a local storage inspector. The local storage inspector, will allow us to perform the following operations:

• Viewing all the key-value pairs that are currently stored in local storage
• Adding a new key-value pair to local storage
• Clearing all key-value pairs in local storage

Figure 3.20 depicts the user interface for the local storage inspector:

The box directly under the LocalStorage Demo title is a div container that is responsible for holding the list of key-value pairs that are currently stored in local storage. The Key input text field is where the user enters the key for the key-value pair. The Value input text field is where the user enters the value for the key-value pair. Clicking on the Save button will save the new key-value entry into local storage. Clicking on the Clear All button, will clear all key-value entries in local storage.