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

localStorage.name = 'Rome';

Get value

localStorage.name;

Refresh page - still there!

Using JSON stringify / parse

localStorage.age = 32;
localStorage.stoked = true;
localStorage.obsessions = ["books", "working out", "drinking coffee"]
var myFaves = {food: "shrimp tacos", number: "5", album: "Views"};
localStorage.faves = myFaves;

Now let's look at the whole localStorage object

localStorage

The localStorage is a JSON object - it can only store strings!!!

Solution: JSON.parse() and JSON.stringify()

JSON MDN Documentation

stringify - converts object to string

localStorage.faves = JSON.stringify(myFaves);

parse - converts string to object

JSON.parse(localStorage.myFaves);

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.

try {
  // Code that is prone to errors (if invalid JSON is parsed)
  var listValues = JSON.parse(localStorage.myList);
} catch (err) {
  // If an error occurs, catch the error and handle it gracefully, such as
  // setting a default value (empty array)
  var listValues = [];
}

MDN Documentation: try...catch statements