vuex + sessionstorage 解决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内，然后判断刷新的话直接提取数据即可。不用再重定向重新请求数据这么麻烦了