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))
        })
      }
    }

    第二种方法利用localStorage

    //在页面加载时读取localStorage里的状态信息
        localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
        
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
        })

    转载:https://www.cnblogs.com/Jimc/p/11536962.html

  • 相关阅读:
    java获得两个日期之间的所有月份
    Java设计模式之观察者模式
    SpringMVC项目配置
    Java设计模式之策略模式
    Tomcat源码
    线程池
    java内存模型
    JVM内存结构 JVM的类加载机制
    java虚拟机-垃圾回收算法
    并发容器-ConcurrentHashMap,CopyOnWriteArrayList
  • 原文地址:https://www.cnblogs.com/hzh-666/p/12294490.html
Copyright © 2011-2022 走看看