Localstorage for chosen spells

src/App.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { Loading, Dialog } from 'quasar'
+import { LocalStorage, Loading, Dialog } from 'quasar'
 import Vue from 'vue'
 import 'whatwg-fetch'
 import { state, dispatch } from './store'
@@ -49,19 +49,29 @@ function fetchFailure (reason) {
   console.error(message, reason)
 }
 
+function fetchSpells () {
+  fetch('./statics/dnd5e.json')
+  .then(response => response.json())
+  .then(fetchSuccess)
+  .catch(fetchFailure)
+  .then(() => { Loading.hide() })
+}
+
 export default {
   data () {
     return { state }
   },
   mounted () {
+    if (LocalStorage.has('chosen')) {
+      dispatch({
+        type: 'LOAD_LOCAL_CHOSEN'
+      })
+    }
+
     if (!this.state.spells.loaded) {
       Loading.show()
 
-      fetch('./statics/dnd5e.json')
+      fetchSpells()
-      .then(response => response.json())
-      .then(fetchSuccess)
-      .catch(fetchFailure)
-      .then(() => { Loading.hide() })
     }
   }
 }

src/store.js

@@ -1,3 +1,5 @@
+import { LocalStorage } from 'quasar'
+
 export let state = {
   spells: {
     loaded: false,
@@ -15,6 +17,9 @@ export function dispatch (action) {
     case 'SPELLS_RESOLVED':
       state.spells = action.data
       break
+    case 'LOAD_LOCAL_CHOSEN' :
+      state.chosen = LocalStorage.get.item('chosen').split(',')
+      break
     case 'CHANGE_CHOSEN':
       if (action.data.want) {
         state.chosen.push(action.data.name)
@@ -23,6 +28,13 @@ export function dispatch (action) {
         let index = state.chosen.indexOf(action.data.name)
         if (index >= 0) state.chosen.splice(index, 1)
       }
+
+      if (state.chosen.length) {
+        LocalStorage.set('chosen', state.chosen.join(','))
+      }
+      else {
+        LocalStorage.remove('chosen')
+      }
       break
     case 'SEARCH_CHANGED':
       state.loadedPagination = 1