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 idstorageKey
and a button with idsetStorage
. You'll save the input field's value to localStorage when the button is clicked. -
Next, bind a click event to the
setStorage
button. When clicked, save the input field's value to localStorage using the keymyKey
. -
Create another div with id
localStorage-retrieve
. Inside this div, add a div element with idoutput
to display the retrieved value and a button with idgetStorage
to retrieve the value from localStorage. -
Bind a click event to the
getStorage
button. When clicked, retrieve the value from localStorage using the keymyKey
and display it in theoutput
element.
Remember,
localStorage
values are stored as strings. If you want to store complex data types like objects or arrays, you have to convert them into strings usingJSON.stringify()
before storing and parse them back usingJSON.parse()
after retrieving.