vue params passing parameters refresh web page data loss solution

Here is a piece of code. I want it to refresh the web page without losing the data. I also don’t want the data to be displayed in the URL address.

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
 
接收数据页面A:
val:JSON.parse(this.$route.params.val)
 
 
这时刷新页面A，val就会报错undefined

1. When using  query to pass parameters, since the data is spliced ​​after the URL address, refreshing the web page will not cause data loss.

发送数据页面Q:
this.$router.push({name:'A',query:{val:JSON.stringify(val)}})
 
接收数据页面A:
val:JSON.parse(this.$route.query.val)
 
 
页面A地址:xxx/A?val=xxxxxxxxxxxxxx
这时刷新页面A，数据正常存在,但是页面地址会变得很长，而且传递的数据也会暴露在外面。

 Although the above method satisfies the requirement of refreshing the web page data without losing it, it does not meet the second condition. The data appears in the URL address. So not very good.

2. Use params to pass parameters, and the data will not appear in the url address.

The first code uses params to pass parameters . Although this can prevent the data from appearing in the URL address, refreshing the web page will cause data loss. So it's not very good either.

How can this be achieved?

1: Using the browser to directly refresh the web page in vue will not trigger the two functions beforeDestory  and destoryed  in the vue life cycle. Because refreshing the page directly with the browser is equivalent to visiting the URL again. It has nothing to do with the vue life cycle.

2: The difference between localStorage and sessionStorage

If the data stored in localStorage is not actively cleared, even if the browser is closed, it will still exist the next time you open the browser. It is a long-term existence.

The data stored in sessionStorage will be automatically cleared as soon as you close the browser. But refreshing the webpage will not clear it. It is a temporary existence.

Based on the above two knowledge points, you can use the two methods of browser refresh in Vue not to trigger the beforeDestory life cycle function and data storage locally to complete the shortcomings of params refresh and lost data .

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
 
接收数据页面A:
val:this.$route.params.val==undefined?undefined:(JSON.parse(this.$route.params.val) || JSON.parse(sessionStorage.getItem('musicList')))
//params.val是否等于undefined?若为true则val赋值为undefined,若为false则利用短路运算符，若存在this.$route.params.val 则赋值给 val,若不存在则从sessionStorage里找数据赋值给val 
 

//虽然浏览器刷新不会触发destory,但是会每次触发created。 
created(){
    //若条件为false则表示没存储过该数据。是第一次进入该页面。那么就把数据存入本地。
    if(Boolean(sessionStorage.getItem('musicList')) == false) {
          // 数据储存在本地存储里 
          sessionStorage.setItem('musicList', JSON.stringify(this.Id))
    }
    //若val==undefined则表示，该页面刷新过了。params数据没了。那么就从本地找出数据再赋值给val
    if(this.val==undefined){
     this.val= JSON.parse(sessionStorage.getItem('musicList'))
    }
}
 
//当正常的从这个页面跳转到其他页面的时候会触发该函数，切到其他页面的时候就把该数据从本地存储删掉即可
beforeDestory(){
    sessionStorage.removeItem('musicList')
}

LocalStorage is not used above because if the user jumps to page A, closes the browser directly, and then opens the browser and enters the URL, the data can be found from the local storage, but sessionStorage closes the browser and the data disappears . There will be no localStorage problems.