Using localStorage with your Vue app

If you learned to code in the era of modern frontend JavaScript frameworks, you might be unfamiliar with localStorage and how to use it. After all, when developing Vue apps, it makes more sense to use Vuex to share data between all your components. But what if you have a standalone Vue app powering a single piece of a larger, non-Vue application?

Before we begin, here's a great explanation of localStorage from W3Schools.

Let's say your app has a dashboard that's running Vue, but the rest of the application is built with templated HTML. The dashboard allows the user to select content from a list of tabs. Within each tab is a data table with a bunch of information that doesn't really matter to us -- all we need to remember is which tab the user selected. The user will follow whatever content is linked in the data tables, but when the user is returned to the dashboard, we want to return them to the same tab from which they exited the dashboard. Since the Vue app's data is cleared every time the user navigates away from the page, we cannot simply store this value for later.

Our data looks something like this:

data() {
     return {
          availableTabs: [
                    { display_name: 'Draft', value: 10 },
                    { display_name: 'In Review', value: 11 }
                    { display_name: 'Edit Required', value: 12 },
                    { display_name: 'Published', value: 13 }
               ],
          selected: {}
     }
}

The user can select from any of the availableTabs. We need to store the selected value for later. Let's setup a watcher to react whenever selected is updated:

  watch: {
    selected: function(newValue, oldValue) {
      localStorage.setItem('selected', JSON.stringify(newValue))
    }
}

This will save the selected object to the browser's localStorage every time it is updated by the user. When the user returns to the dashboard, we need to get the previously selected tab when the page is loading. Let's do this in our mounted function:

mounted() {
      let previouslySelected = JSON.parse(localStorage.getItem('selected'))
      if (previouslySelected) {
        if (
          this.availableTabs.find(x => x.value === previouslySelected.value)
        ) {
          return (this.selected = previouslySelected)
        } else {
          return (this.selected = { display_name: 'Draft', value: 10})
        }
      }
}

Great! Now this should load the previously selected tab when the user returns to the dashboard.

Lastly, it might be a good idea to delete the localStorage data when the user logs out. I accomplished this by attaching this small piece of vanilla JavaScript to the app's logout button:

document.getElementById('logout-btn').onclick = function() {
  window.localStorage.clear()
}

Another option is to use sessionStorage instead, which will delete this information when the browser is closed. Here's a great tutorial on that: https://linguinecode.com/post/clear-localstorage-browser-tab-closing