Local Storage Lab
In this lab, you'll practice using the Web Storage API by creating a simple key-value storage system. You will create two div sections, one for saving data to localStorage and another for retrieving data from it.
First, create a div with id
localStorage-setup. Inside this div, add an input field with id
storageKeyand a button with id
setStorage. You'll save the input field's value to localStorage when the button is clicked.
Next, bind a click event to the
setStoragebutton. When clicked, save the input field's value to localStorage using the key
Create another div with id
localStorage-retrieve. Inside this div, add a div element with id
outputto display the retrieved value and a button with id
getStorageto retrieve the value from localStorage.
Bind a click event to the
getStoragebutton. When clicked, retrieve the value from localStorage using the key
myKeyand display it in the
localStoragevalues are stored as strings. If you want to store complex data types like objects or arrays, you have to convert them into strings using
JSON.stringify()before storing and parse them back using