You can access localStorage with window.localStorage. If you type that into a console, you'll probably see that the current site you call it from isn't using it.
The way localStorage actually stores its data is with string key/value pairs. You either set or get the values by their key string. For example, I might add a key named "user", and set its value to "John": window.localStorage.setItem('user','John'). Now if you call window.localStorage you'll see you have 1 item.
Now that you've set an item, you can also get it's value by calling it by its string: window.localStorage.getItem('user')
One more method to add to these localStorage basics would be window.localStorage.clear(), which as you might guess, clears out everything in localStorage.
So far everything seems pretty simple, right? Let's see a simple, real world example of how we can use this. Let's make a small notepad type app, that will store everything we type into it, into our localStorage. Let's set up some quick markup first:
Which would give us a page like so:
Read it too
Great, we've added saving to our notepad app, but if you refresh the notepad is still blank like before. However, if you call window.localStorage in a console, you will see that the saved text still exists. All we need to do is add a little more JS to retrieve any saved data and apply it on load!
With that middle section, you'll see we first check for the existence of any saved text (excluding line breaks) under the "data" key, and if so, apply it to the notepad div. With that, you now have a super simple notepad app using some localStorage basics!