The localStorage store data in name/value pair and example below we have an example to set and retrieving data from local storage.
What are we learning?
- HTML local storage
In this example, we have an input box to add new bill with bill status not paid, as in the checkbox with ticked indicate bill paid. We can delete the billing record from the local storage by clicking on icon recycle bin.
Step 1: Add the following code in index.html to display the input box and list of all bill record from local storage when the constructor of a class is called.
In the highlight ul tag, we are loading all the bill item from local storage when a browser loads the page. We have a function in index.html.
- We are using event listener keypress on input text box and the keyCode 13 indicate enter key.
- Use of reduce() method on bills array object: bills.reduce((html, bill, index) – to load all the bill record from local storage to accumulator HTML variable and bill is a current element of bills array record.
- Create toBill object when window event listener load the page