sessionStorage和localStorage的使用

区别

sessionStorage 浏览器关闭时自动销毁

localStorage 存储在浏览器中，无期限

sessionStorage用法 (一般用于浏览器刷新缓存vuex)

// 保存或设置数据到sessionStorage
    sessionStorage.setItem('key','value')
    
// 获取某个sessionStorage
    sessionStorage.getItem('key')
    
// 从sessionStorage删除某个保存的数据
    sessionStorage.removeItem('key')
    
// 从sessionStorage删除所有保存的数据
    sessionStorage.clear();

localStorage用法

// 保存或设置数据到localStorage
    localStorage.setItem('key','value')
    
// 获取某个localStorage
    localStorage.getItem('key')
    
// 从localStorage删除某个保存的数据
    localStorage.removeItem('key')
    
// 从localStorage删除所有保存的数据
    localStorage.clear();

vuex在页面刷新后，store中的状态将被重新初始化，赋值的数据丢失, 所以在页面刷新或离开之前将store中的数据保存到sessionStorage 或 localStorage中，在页面重新加载后再将数据取出，通过vuex的$store.replaceState 将数据替换到store中

app.vue:

created () {
 
     //在页面加载时读取sessionStorage里的状态信息
     if (sessionStorage.getItem("storedata") ) {
         this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("storedata"))))
     }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
    });     // 兼容iphone手机
    window.addEventListener("pagehide",()=>{
         sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
    });
   },