The given a web page allows the user to add items to a grocery list. A Clear button clears the list. The list is also cleared if the page is reloaded. Your goal is to use localStorage to store the list so reloading the page does not clear the list. Examine the given JavaScript
The groceries.js file contains several completed functions:
The DOMContentLoaded event handler adds click handlers for the Add and Clear buttons, calls loadList() to load items from localStorage into the groceryList array, and calls showItem() to display the items in groceryList.
enableClearButton() enables or disables the Clear button.
showItem() displays a single item at the end of an ordered list.
addBtnClick() calls showItem() to display the item, adds the item to the groceryList array, and calls saveItem() to save the item to localStorage.
clearBtnClick() clears the groceryList array and removes all the items from the ordered list.
Complete the functions
Complete the JavaScript functions below so the list is restored when the page is reloaded:
loadList() should load a grocery list from localStorage and return an array containing each item. Assume the list is stored as a single comma-delimited string. Ex: The list stored as "orange juice,milk,cereal" is returned as the array ["orange juice", "milk", "cereal"]. An empty array should be returned if localStorage does not contain a grocery list.
saveList() should save the given groceryList array to localStorage as a single comma-delimited string. Ex: The array ["orange juice", "milk", "cereal"] should be saved as the string "orange juice,milk,cereal".
clearList() should remove the grocery list from localStorage.
All three functions should use the localStorage item called "list".