SAVING YOUR TO-DO LIST ITEMS to localStorage : The user can now add and remove as many items as they need from the list.
But you might have noticed that if you refresh your page, your to-do list disappears. This is because so far we’ve just added or removed HTML elements from our screen. We haven’t saved the list or changed our HTML file.
If we want our browser to save and remember our list, we need to use localStorage, a handy API that’s available in HTML5 (the fifth version of the HTML programming language).
This API lets you save information in your browser, so even if your page is refreshed or closed you can still access the data. Like the DOM, localStorage is a collection of functions, and it’s simple to use.
All you have to do is tell your browser you want to use localStorage by typing the localStorage keyword (written in camelCase) and giving a name to the information you want to store.
Set the value of the information you want to store using an equals sign (=) and double quotes (” “), like this:
localStorage.storageName = "information"; //added "information" text
If you want to remove a piece of information from localStorage, you just leave an empty value, like this:
localStorage.storageName = ""; //"information" text removed.
Remember the // implies a line of commenting after the // NOT before.
Viewing the information you save using localStorage is simple. All you have to do is use the keyword and the localStorage name, like this:
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script> localStorage.nameApp = "Hello World!"; alert(localStorage.nameApp); </script> </body> </html>
