Testing How LocalStorage Works

Open up your Chrome DevTools.

Find the Chrome DevTools Applications tab. (Note that you might have to click on the chevron >>. The tab is called Storage on Firefox.)

Notice all the different ways you can store things locally. We will just be using LocalStorage.

Click on LocalStorage then click on the local web address for your game:

Browsersync VSCode Live Server Extension
http://127.0.0.1:3000 http://127.0.0.1:5500
http://localhost:3000 http://localhost:5500

Notice there’s nothing in there. Let’s add something using JavaScript.

Click on the Console tab to switch.

Now type the following to set the value of the hscore.

localStorage.setItem('hscore','300')
undefined

The undefined just means that nothing was returned from the function.

Notice that the value is always a string.

Now click on the Application/Storage tab and look for hscore.

Go back to the Console and change the value by setting it to something else. You can use the arrow keys in the Console to go up in your command history.

Just to live dangerously let’s change the value to a number instead of a string to see what happens.

localStorage.setItem('hscore',100)
undefined

Notice nothing spectacular happened. JavaScript even converted the number 100 into a string '100' for you.

Now let’s just get the score.

localStorage.getItem('hscore')
100

Now you’re ready to use this to store stuff for our web sites, apps, and games.