Using local storage

The next type of storage we will look at is a relatively recent addition to the browser toolset. It's called local storage, and it's been around for a while. You can add items to it as follows:

localStorage.setItem("pages", "all_the_pages");

It's simpler than cookies to read items from:

localStorage.getItem("pages");

This will persist the data beyond page reloads or the browser closing. You can store considerably more data than in cookies (anywhere from 3 MB to 10 MB, by default), and the interface is easier to use.

So, how can we use this to store our pages? Let's abstract local storage a bit:

export default {
    "get": function(key, defaultValue) {
        var value = window.localStorage.getItem(key);
        
        var decoded = JSON.parse(value);

        if (decoded) {
            return decoded;
        }

        return defaultValue;
    },

    "set": function(key, value) {
        window.localStorage.setItem(
            key, JSON.stringify(value)
        );
  ...