代码优化-刷新界面后怎么保存用户数据

先上一张图：

是不是觉得看了个寂寞，感觉也没啥变化，是的，这是一个很不显眼的优化，在这个🌰中，每次刷新保持了用户选择的地区没有被初始化，保存了用户数据，最开始是想用vue的路由来做，但是效果不太好是(是我太菜 ，使用query和params在刷新的时候会丢失赋值，强行使用window.history会引发地址混乱)，最后选择用sessionStorage实现，可以很简单的实现：刷新页面或刚进入页面的时候去取存储的值，没有的话赋默认值，每次当用户数据改变的时候将改变的值存储起来，over！！但是作为一个优秀的前端工程师，我肯定有更好的解决方案，首先分析一下上面的方法有哪些不好的地方：

1. 当用户数据改变的时候，就将数据存起来，是不好太浪费了？我们只需要存储最终的数据即可，小孩子才看过程，成年人只要结果
2. 获取和存储用户数据的时候都需要去写sessionStorege.setItem(xxx)\.getItem(xxx) 是不是觉得代码不够优雅?
3. 啊吧啊吧。。。。。

接下来就是展示真正的技术了

使用sessionStorage

为什么使用sessionStorage 不使用localStorage?

​ 我当前的应用场景是保存用户的搜索🔍条件，并不需要永久的保存将数据存储。

我在写的项目前端使用的框架是Vue，我就利用了Vuex + 浏览器事件监听 + VueRoute路由钩子函数实现了需要的效果

首先明确我们需要存储的用户数据是选择的地区这个字段，在这里命名为activeRegionName，将它放到store里面，但是store里面的数据并不都要存储起来，我们还需要一个数组记录需要存储到store里面数据的名字，实现代码如下：

使用getter将state暴露出去(最开始我以为直接使用…mapState()引入即可，但是不行，需要使用…mapGetters())，在mutations对外提供操作state里面数据的方法,代码如下：

 //工具方法
 const storeLocalStore = (value)=>{
    sessionStorage.setItem(STORAGEKEY,JSON.stringify(value))
}
///////////////////////////
 getters :{
        activeRegionName: state => state.activeRegionName
    },
 mutations : {
        setStoreData(state){
            let updataData = {}
            storeDataName.forEach(item =>{
                updataData[item] = state[item]
            })
            storeLocalStore(updataData)
        },
        getStoreData(state){
            let storeData = JSON.parse(sessionStorage.getItem(STORAGEKEY)) 
            if(!storeData) return 
            storeDataName.forEach(item=>{
                if(storeData[item]&& state.hasOwnProperty(item)){
                    state[item] = storeData[item]
                }
            })
        },
        changeActiveRegionName(state,value){
            state.activeRegionName = value
        }
    },    

到现在为止我们可以将activeRegionName存储到sessionStorege里面去了，接下来需要完成的是监听刷新操作和url变化的操作

在methods 里面使用 ...mapMutations()引入mutations里面的方法，在computed里面使用...mapGetters()引入state里面的数据。

在mounted()里面添加浏览器刷新的监听事件，destroyed()里删除监听事件，代码如下：

mounted() {
     this.registEventListener()
  },
destroyed(){
     this.cancelEventListenner()
  },
registEventListener(){
  window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
cancelEventListenner(){
  window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
beforeunloadFn(){
  this.setStoreData()
  },

至此在刷新时保存用户数据我们已经实现了，但是这个需求里面还有一个操作是右上角有个跳转，也需要在这个操作的时候存储用户数据，然而这个操作并不会触发beforeunload这个时间，这个时候就可以使用VueRouter的钩子函数了，beforeRouteLeave直接放到跟methods同级即可，代码如下：

 beforeRouteLeave(to, from, next){
     this.setStoreData()
     next()
 },

这样的话我们的需求就实现了

使用URL存储

还需要等我试验完在写。。。。。。