Local Storage
HTML5 introduced a feature called localStorage
that allows us to store data on a local user's computer. The data is unique for a single person using a specific web site.
Local storage is an object that is retained even if the browser is reloaded. We can get and set values like any other object.
(pop open console on js quiz)
Set value
Get value
Refresh page - still there!
Using JSON stringify / parse
Now let's look at the whole localStorage object
The localStorage is a JSON object - it can only store strings!!!
Solution: JSON.parse() and JSON.stringify()
stringify - converts object to string
parse - converts string to object
Preventing errors
There is still one problem. If we run JSON.parse
on something that isn't valid JSON, it will throw an error and prevent some of our JavaScript from running! We can avoid this by using a try...catch statement.
A try..catch statement will "try" running a block of code that is prone to throw an error. If the code throws an error, the error won't be thrown to the console. Instead, it will be handled gracefully by the "catch" block, where we can set a default value for our values.
Last updated