HTML and CSS Reference
In-Depth Information
Try saving some data. Start by opening up a blank HTML file in your browser and naming it test.html . Next,
fire up the console in your developer tools and enter the following code:
localStorage.setItem(“name", “Joe Balochio");
If all went well, that data should now be stored in the datastore that the browser created for your domain.
Next let's retrieve your data.
getItem(key)
The getItem() function has just one parameter, the key that is used to identify your data in the datastore.
Try retrieving the data you saved in the preceding example. Enter the following code into your console:
localStorage.getItem(“name");
You should see that the data you stored is displayed in the console window, as shown in Figure 12-1.
Figure 12-1 Retrieving data in localStorage using the getItem() function.
The data that you store in LocalStorage is persistent . This means that if you close your browser window and then re-
open it, the data is still there. Try closing your browser and then loading the same HTML file again. Can you still ac-
cess the data?
removeItem(key)
Naturally you need to be able to remove the data that you place in LocalStorage. This is done using the re-
moveItem() function, passing in the key of the data you want to remove.
Try removing the data you saved in the previous example and then attempt to fetch it again. If all goes well, it should
be gone.
localStorage.removeItem(“name");
localStorage.getItem(“name");
You should see that the console returns null when you try to fetch the data. This is shown in Figure 12-2.
Search WWH ::




Custom Search