fix: [SSR] Cannot use set() or clear() with LocalStorage on client side

quasarframework#2517
angelomedeiros · Sep 7, 2018 · fe11a45 · fe11a45
1 parent c2f7beb
commit fe11a45
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 15 deletions.
diff --git a/dev/components/other/web-storage.vue b/dev/components/other/web-storage.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="layout-padding">
+    <div>{{ storage }}</div>
+    <q-btn-group>
+      <q-btn label="Toggle test1" @click="toggle('test1')" />
+      <q-btn label="Toggle test2" @click="toggle('test2')" />
+      <q-btn label="Toggle test3" @click="toggle('test3')" />
+      <q-btn label="Clear" @click="clear" />
+    </q-btn-group>
+  </div>
+</template>
+
+<script>
+import { LocalStorage } from 'quasar'
+
+export default {
+  data () {
+    return {
+      storage: LocalStorage.get.all()
+    }
+  },
+  methods: {
+    toggle (key) {
+      if (LocalStorage.has(key)) {
+        LocalStorage.remove(key)
+      }
+      else {
+        LocalStorage.set(key, `${key}-value`)
+      }
+      this.update()
+    },
+    clear () {
+      LocalStorage.clear()
+      this.update()
+    },
+    update () {
+      this.storage = LocalStorage.get.all()
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.update()
+    })
+  }
+}
+</script>
+
+<style lang="stylus">
+@import '~variables'
+
+</style>
diff --git a/src/components/select/QSelect.js b/src/components/select/QSelect.js
@@ -346,7 +346,7 @@ export default {
       props: {
         cover: true,
         disable: !this.editable,
-        anchorClick: false,    
+        anchorClick: false,
         maxHeight: this.popupMaxHeight
       },
       slot: 'after',

diff --git a/src/plugins/local-storage.js b/src/plugins/local-storage.js
@@ -2,16 +2,24 @@ import { onSSR, hasWebStorage } from './platform.js'
 import { getEmptyStorage, getStorage } from '../utils/web-storage.js'
 
 export default {
-  install ({ $q }) {
+  install ({ $q, queues }) {
+    const assignStorage = storage => {
+      $q.localStorage = storage
+      Object.assign(this, storage)
+    }
+
+    const clientInit = () => {
+      if (hasWebStorage()) {
+        assignStorage(getStorage('local'))
+      }
+    }
+
     if (onSSR) {
-      $q.localStorage = getEmptyStorage()
+      assignStorage(getEmptyStorage())
+      queues.takeover.push(clientInit)
       return
     }
 
-    if (hasWebStorage()) {
-      const storage = getStorage('local')
-      $q.localStorage = storage
-      Object.assign(this, storage)
-    }
+    clientInit()
   }
 }
diff --git a/src/plugins/session-storage.js b/src/plugins/session-storage.js
@@ -2,16 +2,24 @@ import { onSSR, hasWebStorage } from './platform.js'
 import { getEmptyStorage, getStorage } from '../utils/web-storage.js'
 
 export default {
-  install ({ $q }) {
+  install ({ $q, queues }) {
+    const assignStorage = storage => {
+      $q.sessionStorage = storage
+      Object.assign(this, storage)
+    }
+
+    const clientInit = () => {
+      if (hasWebStorage()) {
+        assignStorage(getStorage('session'))
+      }
+    }
+
     if (onSSR) {
-      $q.sessionStorage = getEmptyStorage()
+      assignStorage(getEmptyStorage())
+      queues.takeover.push(clientInit)
       return
     }
 
-    if (hasWebStorage()) {
-      const storage = getStorage('session')
-      $q.sessionStorage = storage
-      Object.assign(this, storage)
-    }
+    clientInit()
   }
 }