zoukankan      html  css  js  c++  java
  • 解决vue刷新页面以后丢失store的数据

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据。根据我的需求,最合适的是sessionStorage。
    beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中。
    当然,在页面刷新时还要读取sessionStorage中的数据到store中,读取和储存都写在app.vue中。

    export default {
      name: 'app',
      created () {
        // 在页面加载时读取sessionStorage
        if (sessionStorage.getItem('store')) {
          this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
        }
        // 在页面刷新时将store保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
          sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
      }
    }
  • 相关阅读:
    SpringMVC处理请求
    SpringMVC的启动
    数据结构
    Collections工具类
    位运算
    web应用
    spring Environment
    servlet及jsp之间的请求转发
    spring AOP
    Spring 事件
  • 原文地址:https://www.cnblogs.com/Jimc/p/11536962.html
Copyright © 2011-2022 走看看