Local Storage allows web applications to store data

persistently in a web browser. Data in the local storage

is not deleted when the browser is closed and doesn't

expire. This feature makes Local Storage very useful

for saving the state of a web application.

$2$ Use Local Storage in your React

app.

In the App.js file, two functions are defined:

addEmployee and saveData.

$$ addEmployee is used to add a new

employee to the state variable employees.

$$ saveData is used to save the employees

array in local storage.

The localStorage.setItem$()$ method is used to save

data to local storage. The method takes two

arguments:

$$ A key to identifying the data

$$ The data itself

The data is converted to a string format using

JSON.stringify$(),$ as local storage can only store

string values.

The localStorage.getItem$()$ method is used to

retrieve data from local storage. This data is then

parsed back into its original format using

JSON.parse$().$

$3$ Inspect the local storage in their

browser. This step can be useful

for debugging purposes.

Google Chrome:

$1.$ Go to the webpage you want to inspect $($in this case,

your locally served React app$).$

$2.$ Right$-$click anywhere on the page and click 'Inspect'

to open the developer console.

$3.$ Select the $$Application$$ tab.

$4.$ In the sidebar on the left, under the $$Storage$$ section,

select $$Local Storage,$$ then select the page's URL.

$5.$ The NavBar options are Elements, Console,

Sources, Network, Performance, Memory,

Application. If you don$$t see it$,$ you may need to

expand the size of the window.

Mozilla Firefox:

$1.$ Right$-$click on the webpage and click $$Inspect

Element.$$

$2.$ Select the $$Storage$$ tab at the top of the developer

console.

$3.$ In the sidebar on the left, select $$Local Storage,$$ then

select the page's URL.

Safari:

$1.$ Go to $$Safari $>$ Preferences$$ and select the

$$Advanced$$ tab.

$2.$ Check the box at the bottom that says $$Show

Develop menu in menu bar.$$

$3.$ On your webpage, right$-$click and select $$Inspect

Element.$$

$4.$ Click the $$Storage$$ tab at the top and select $$Local

Storage$$ in the sidebar.

You should be able to see the employees key and

its associated data in local storage.

$4$ Practice! You are encourage to add, remove, and modify data

in your application and watch how it affects the data

saved in local storage.

$5$ Commit your

changes to your

GitHub repositories

after you have

verified the changes.

As a final step, verify that your browser behaves as

expected. If it does not, you should check your console

for any error messages, verify your code against the

original in the GitHub repository, and ask for help if

needed.

Important:

We recommend you use the GitHub code hosting platform to upload your work. Doing this will enable

you to version control and collaborate effectively with your instructors and peers.

Part $2$:

$$ Take a screen capture of the Employee Data on the Local Storage page.