第一部分
SessionStorage
首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里：
根据sessionstorage的特性，做一下各个方法的封装：
const ls = window.sessionStorage;exportdefault { 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内，然后判断刷新的话直接提取数据即可。不用再重定向重新请求数据这么麻烦了
个人学习理解和总结，很多不足还请指正~