Added fallback if Storage API fails

index.html

@@ -19,7 +19,7 @@
     <meta property="og:description" content="Der EUROMAT ist nicht einfach nur ein Wahlomat. Sondern Ihr digitaler Wahl-Freund, der Ihnen einen Eindruck von den europapolitischen Positionen der Parteien vermittelt." />
     <meta property="og:image" content="https://www.euromat.info/static/img/facebook.2.png" />
     <meta property="og:image:secure_url" content="https://www.euromat.info/static/img/facebook.2.png" />
-    <meta property="fb:app_d" content="766231516835034" />
+    <meta property="fb:app_id" content="766231516835034" />
     <!-- Add to home screen for Safari on iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">

src/app/euromat/components/emphasis.vue

@@ -67,7 +67,14 @@
         }
       },
       submitEmphasis () {
-        sessionStorage.setItem('euromat-emphasized', JSON.stringify(this.emphasized))
+        const emphasized = JSON.stringify(this.emphasized)
+
+        if (this.$browser.supports('sessionStorage')) {
+          sessionStorage.setItem('euromat-emphasized', emphasized)
+        } else {
+          this.$root.$data.backupStorage.emphasized = emphasized
+        }
+
         this.$router.push({ path: this.isGermanLocale
           ? '/thesen/ergebnis'
           : '/theses/results'
@@ -76,7 +83,11 @@
     },
 
     created () {
-      if (!sessionStorage.getItem('euromat-answers')) {
+      if (this.$browser.supports('sessionStorage')) {
+        if (!sessionStorage.getItem('euromat-answers')) {
+          this.$router.push({ path: this.isGermanLocale ? '/thesen' : '/theses' })
+        }
+      } else if (this.$root.$data.backupStorage.answers === undefined) {
         this.$router.push({ path: this.isGermanLocale ? '/thesen' : '/theses' })
       }
     }

src/app/euromat/components/euromat.vue

@@ -126,7 +126,14 @@
         }
       },
       forwardToResults () {
-        sessionStorage.setItem('euromat-answers', JSON.stringify(this.answers))
+        const answers = JSON.stringify(this.answers)
+
+        if (this.$browser.supports('sessionStorage')) {
+          sessionStorage.setItem('euromat-answers', answers)
+        } else {
+          this.$root.$data.backupStorage.answers = answers
+        }
+
         this.$router.push({ path: this.isGermanLocale
           ? '/thesen/gewichtung'
           : '/theses/emphasis'

src/app/euromat/components/results.vue

@@ -155,8 +155,16 @@
     },
 
     created () {
-      const emphasized = JSON.parse(sessionStorage.getItem('euromat-emphasized'))
-      const answers = JSON.parse(sessionStorage.getItem('euromat-answers'))
+      let emphasized
+      let answers
+
+      if (this.$browser.supports('sessionStorage')) {
+        emphasized = JSON.parse(sessionStorage.getItem('euromat-emphasized'))
+        answers = JSON.parse(sessionStorage.getItem('euromat-answers'))
+      } else {
+        emphasized = JSON.parse(this.$root.$data.backupStorage.emphasized)
+        answers = JSON.parse(this.$root.$data.backupStorage.answers)
+      }
 
       if (!emphasized) {
         this.$router.push({ path: this.isGermanLocale ? '/thesen' : '/theses' })

src/app/euromat/routes.js

@@ -3,9 +3,10 @@ import EuroMat from './components/euromat'
 import Emphasis from './components/emphasis'
 import Results from './components/results'
 import i18n from './i18n'
+import { storageAvailable } from '@/helper/storage'
 
 function hasAnswers (to, from, next) {
-  if (!sessionStorage.getItem('euromat-answers')) {
+  if (storageAvailable('sessionStorage') && !sessionStorage.getItem('euromat-answers')) {
     next({ path: '/' })
   }
   next()

src/app/party/components/index.vue

@@ -75,11 +75,19 @@
     name: 'Party',
 
     data () {
+      let answers
+
+      if (this.$browser.supports('sessionStorage')) {
+        answers = JSON.parse(sessionStorage.getItem('euromat-answers'))
+      } else {
+        answers = JSON.parse(this.$root.$data.backupStorage.answers)
+      }
+
       return {
         logoSize: 60,
         partyLogo: require(`@/assets/svg/${this.$route.params.token}-logo.svg`),
         party: parties.find(p => p.token === this.$route.params.token.toUpperCase()),
-        answers: JSON.parse(sessionStorage.getItem('euromat-answers')),
+        answers,
         toggles: theses.map(t => ({ id: t.id, show: false })),
         theses,
         options
@@ -144,7 +152,6 @@
         )
       },
       showStatement (id) {
-        console.log(id, this.toggles)
         return this.toggles.find(t => t.id === id).show
       },
       toggleStatement (id) {

src/components/app-menu.vue

@@ -38,7 +38,9 @@
     methods: {
       changeLanguage (locale) {
         this.$i18n.locale = locale
-        localStorage.setItem('euromat-locale', locale)
+        if (this.$browser.supports('localStorage')) {
+          localStorage.setItem('euromat-locale', locale)
+        }
       }
     }
   }

src/helper/storage.js

@@ -0,0 +1,36 @@
+export function storageAvailable (type) {
+  try {
+    var storage = window[type]
+    const x = '__storage_test__'
+    storage.setItem(x, x)
+    storage.removeItem(x)
+    return true
+  } catch (e) {
+    return (
+      e instanceof DOMException &&
+      // everything except Firefox
+      (e.code === 22 ||
+        // Firefox
+        e.code === 1014 ||
+        // test name field too, because code might not be present
+        // everything except Firefox
+        e.name === 'QuotaExceededError' ||
+        // Firefox
+        e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+      // acknowledge QuotaExceededError only if there's something already stored
+      storage.length !== 0
+    )
+  }
+}
+
+export default (Vue) => {
+  Object.defineProperties(Vue.prototype, {
+    $browser: {
+      get () {
+        return {
+          supports: storageAvailable
+        }
+      }
+    }
+  })
+}

src/main.js

@@ -5,10 +5,12 @@ import VueFeatherIcon from 'vue-feather-icon'
 import App from '@/app/app'
 import router from './router'
 import i18n from './i18n'
+import storage from '@/helper/storage'
 
 Vue.config.productionTip = false
 Vue.use(VueSVGIcon)
 Vue.use(VueFeatherIcon)
+Vue.use(storage)
 
 /* eslint-disable no-new */
 new Vue({
@@ -16,5 +18,11 @@ new Vue({
   router,
   i18n,
   template: '<App/>',
-  components: { App }
+  components: { App },
+  data: {
+    backupStorage: {
+      answers: undefined,
+      emphasized: undefined
+    }
+  }
 })

src/router/getPageTitle.js

@@ -1,5 +1,5 @@
 export default function getPageTitle (i18n = {}) {
-  const locale = window.localStorage.getItem('euromat-locale')
+  const locale = localStorage.getItem('euromat-locale') || 'de'
   const title = window.document.title.split('—')[0].trim()
   return `${title} — ${i18n[locale]}`
 }