fix:禁用localstorage存储仪表盘数据 容易导致浏览器本地存储越界

frontend/src/components/canvas/components/Editor/ContextMenu.vue

@@ -42,8 +42,8 @@ export default {
   methods: {
     edit() {
       // 编辑时临时保存 当前修改的画布
-      localStorage.setItem('canvasDataEditTmp', JSON.stringify(this.componentData))
-      localStorage.setItem('canvasStyleEditTmp', JSON.stringify(this.canvasStyleData))
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
       if (this.curComponent.component === 'user-view') {
         this.$store.dispatch('chart/setViewId', null)
         this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)

frontend/src/components/canvas/components/Toolbar.vue

@@ -197,8 +197,6 @@ export default {
     },
 
     save() {
-      localStorage.setItem('canvasData', JSON.stringify(this.componentData))
-      localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
       // 保存到数据库
       const requestInfo = {
         id: this.$store.state.panel.panelInfo.id,
@@ -218,8 +216,6 @@ export default {
     },
 
     clickPreview() {
-      localStorage.setItem('canvasData', JSON.stringify(this.componentData))
-      localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
       const url = '#/preview'
       window.open(url, '_blank')
     }

frontend/src/store/modules/panel.js

@@ -6,7 +6,9 @@ const getDefaultState = () => {
       id: null,
       name: '',
       preStyle: null
-    }
+    },
+    canvasStyleDataTemp: null, // 页面全局临时存储数据
+    componentDataTemp: null // 画布组件临时存储数据
   }
 }
 
@@ -18,6 +20,12 @@ const mutations = {
   },
   setPanelInfo: (state, panelInfo) => {
     state.panelInfo = panelInfo
+  },
+  setCanvasStyleDataTemp: (state, canvasStyleDataTemp) => {
+    state.canvasStyleDataTemp = canvasStyleDataTemp
+  },
+  setComponentDataTemp: (state, componentDataTemp) => {
+    state.componentDataTemp = componentDataTemp
   }
 }
 
@@ -27,6 +35,12 @@ const actions = {
   },
   setPanelInfo({ commit }, panelInfo) {
     commit('setPanelInfo', panelInfo)
+  },
+  setCanvasStyleDataTemp({ commit }, canvasStyleDataTemp) {
+    commit('setCanvasStyleDataTemp', canvasStyleDataTemp)
+  },
+  setComponentDataTemp({ commit }, componentDataTemp) {
+    commit('setComponentDataTemp', componentDataTemp)
   }
 }
 

frontend/src/views/panel/edit/index.vue

@@ -195,24 +195,18 @@ export default {
   },
   methods: {
     init(panelId) {
-      // 清理原有画布本地数据
-      localStorage.setItem('canvasData', null)
-      localStorage.setItem('canvasStyle', null)
-
       // 如果临时画布有数据 则使用临时画布数据（视图编辑的时候 会保存临时画布数据）
-      if (localStorage.getItem('canvasDataEditTmp') && localStorage.getItem('canvasStyleEditTmp')) {
-        localStorage.setItem('canvasData', localStorage.getItem('canvasDataEditTmp'))
-        localStorage.setItem('canvasStyle', localStorage.getItem('canvasStyleEditTmp'))
+      const componentDataTemp = this.$store.state.panel.componentDataTemp
+      const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
+      if (componentDataTemp && canvasStyleDataTemp) {
+        this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
+        this.$store.commit('setCanvasStyle', JSON.parse(canvasStyleDataTemp))
       } else if (panelId) {
         get('panel/group/findOne/' + panelId).then(response => {
-          localStorage.setItem('canvasData', response.data.panelData)
-          localStorage.setItem('canvasStyle', response.data.panelStyle)
+          this.$store.commit('setComponentData', this.resetID(response.data.panelData))
+          this.$store.commit('setCanvasStyle', response.data.panelStyle)
         })
       }
-      // 清理临时画布本地数据
-      localStorage.setItem('canvasDataEditTmp', null)
-      localStorage.setItem('canvasStyleEditTmp', null)
-      this.restore()
     },
     save() {
 
@@ -244,19 +238,6 @@ export default {
       })
     },
 
-    // 画布
-    restore() {
-      // 用保存的数据恢复画布
-      let canvasData = null
-      if ((canvasData = localStorage.getItem('canvasData')) !== null && canvasData !== 'null') {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(canvasData)))
-      }
-
-      if (canvasData && canvasData !== 'null') {
-        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
-      }
-    },
-
     resetID(data) {
       data.forEach(item => {
         item.id = uuid.v1()

frontend/src/views/panel/list/PanelList.vue

@@ -420,8 +420,6 @@ export default {
       if (data.nodeType === 'panel') {
         // 加载视图数据
         this.$nextTick(() => {
-          localStorage.setItem('canvasData', null)
-          localStorage.setItem('canvasStyle', null)
           get('panel/group/findOne/' + data.id).then(response => {
             this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
             this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
@@ -522,8 +520,6 @@ export default {
     },
     edit(data) {
       // 清空临时画布
-      localStorage.setItem('canvasDataEditTmp', null)
-      localStorage.setItem('canvasStyleEditTmp', null)
       this.$store.dispatch('panel/setPanelInfo', data)
       bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
     },

frontend/src/views/panel/list/PanelViewShow.vue

@@ -48,9 +48,6 @@ export default {
   },
   methods: {
     clickPreview() {
-      debugger
-      localStorage.setItem('canvasData', JSON.stringify(this.componentData))
-      localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
       const url = '#/preview/' + this.$store.state.panel.panelInfo.id
       window.open(url, '_blank')
     }