vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

第一部分

SessionStorage

首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里：

根据sessionstorage的特性，做一下各个方法的封装：

const ls = window.sessionStorage;
export
default {
    getItem(key) {
        try {
            return JSON.parse(ls.getItem(key));
        } catch (err) {
            return null;
        }
    },
    setItem(key, val) {
        ls.setItem(key, JSON.stringify(val));
    },
    clear() {
        ls.clear();
    },
    keys(index) {
        return ls.key(index);
    },
    removeItem(key) {
        ls.removeItem(key);
    }
}

封装代码解析：

首先将window.sessionStorage/localStorage赋值给简短的变量名ls

然后在js文件中直接export default抛出一个对象，对象内包含五个方法：
　　getItem用来封装数据的获取，其参数是key名
　　setItem用来封装设置数据，其参数是key名
　　　　因为sessionStorage存储的数据只能是字符串，对于常用的对象和数组是存储不了的。
　　　　所以在getItem这里需要JSON.parse来将JSON 字符串转换（“格式化”）为对象、
　　　　在setItem里需要JSON.stringify处理来将对象或者数组转换（“压缩”）为一个 JSON字符串
　　keys里边封装了获取指定下标对应数据的key名，所以参数是index值
　　removeItem负责移除某一个指定key的对应数据
　　clear负责清楚当前所有的sessionStorage数据

材料准备好之后，在需要使用的地方引用

import ls from '../assets/js/ls.js'

然后就是使用了，

一、setItme：

ls.setItem('test', true);
ls.setItem('test2', '字符串');
let test3 = {
    name: 'a',
    sex: 'b',
    age: 24
}
ls.setItem('test3', test3);

存入效果如图：

二、getItem应用

console.log(ls.getItem('test3'));

* 记得键名要加引号

 三、sessionStorage.key（）方法

console.log(ls.keys(0));
console.log(ls.keys(2));
console.log(ls.keys(3));

控制台打印如下：

 四、removeItem

ls.removeItem('test2');

* 键名记得加引号.

可以看到，test2被移除了：

五、 clear

ls.clear()

这下所有的都被清除了：

soeasy,思考一个问题，为什么sessionstorage刷新页面不会清空数据呢？

第二部分

接下来清楚了五个方法各自的用法，来说说我的项目逻辑

vuex的state中，定义这个状态：ActiveProgressEnum
这个是用户参加活动的进程值，只要按流程走，他会一直变化，但是若初始化进来时，他被我自己预先设定成一个不在后端定义范围内的另一个值，比如任性的100000.
vuex里边数据的一个特点时，刷新他就会回归初始化。所以，意味着用户进入页面或者刷新页面，这个值就会变成我自己设定的100000.那么第一个限制条件就完成了。

if(state.init.ActiveProgressEnum === 100000){
}

如前面所说，条件成立会有两种场景：用户进入页面 || 刷新页面。
所以这里还不完全能利用这个。此时我还需要一个状态join，让我区分用户不是在初始化状态。这样，如果这两个条件同时成立，那就能断定他是刷新了。
那么这个状态值需要在一开始没有，页面初始化后才存在，且页面刷新不丢失。
什么数据这么神通广大？！那就是sessionstorage设置的数据。
所以，要在判断条件内部添加一句，获取这个状态值join。

let join = ls.getItem('RYHB_J');//Join缩写，用于判断用户是否是初次加载页面

并且根据业务需要获取一下关键信息

let newTeamID = ls.getItem('RYHB_T');//TeamID缩写，需要保留的重要信息

然后开始判断条件是否同时成立：
但是这里有一点，需要利用js的同步逻辑，这段判断的代码要提前放到最顶部，即初始化数据没有设定之前：

因为如果数据设定以后，每次初始化进入页面后，开始这段判断时，该值就已经存在，也会被检测到，场景就会被当作刷新的情况。

if (join && newTeamID && newTeamID > 0) {
    // 条件成立：页面刷新的情况
    ls.removeItem('RYHB_J');
    window.location.href = 'https://.../index.html?TeamID=' + newTeamID;
}

还有值得注意的是：

ls.removeItem('RYHB_J');

作用：刷新没有清除session的数据，如果条件成立的话，是需要重定向页面，让页面重新按照之前的步骤再走一边流程的，这时应该清除或者重置一下，不然页面一进来数据还存在，这里条件就会成立，会变成死循环，展示上就是页面一直跳转一直刷新。

直接清除join这样条件就不成立了且还方便操作。

而在判断的下边，调用ajax获取数据，并把响应结果中的关键信息(本案例中的newTeamID)一并寄托给sessionStorage：

$axios.get(state.ownSet.dataUrl + 'JoinInActive')
    .then((response) = > {
    if (response && response.data && response.data.result === 1) {
        let data = response.data.RetValue;
        ls.setItem('RYHB_J', true);
        ls.setItem('RYHB_T', data.TeamID);
    } else {}
})
    .
catch ((err) = > {});

这样当用户刷新的时候，会触发顶部的那段判断代码。但是初始化进入的时候不会触发，这就做了刷新的时候重新获取数据

完整的用于判断是否是刷新场景的代码

if (state.init.ActiveProgressEnum === 100000) {
    let newTeamID = ls.getItem('RYHB_T'); //TeamID缩写，需要保留的重要信息
    let join = ls.getItem('RYHB_J'); //Join缩写，用于判断用户是否是初次加载页面
    if (join && newTeamID && newTeamID > 0) {
        // 页面刷新的情况
        // 刷新没有清除session的数据，这时应该清除或者重置一下，不然是死循环，直接清除这样方便操作。
        ls.removeItem('RYHB_J');
        window.location.href = 'https://.../index.html?TeamID=' + newTeamID;
    }
}

这样解决了刷新后页面空白的问题，重定向重新请求数据
但是如果为了解决部分数据丢失的问题，也可以直接将数据实现存在sessionstorage内，然后判断刷新的话直接提取数据即可。不用再重定向重新请求数据这么麻烦了

个人学习理解和总结，很多不足还请指正~