vue案例-vuex+sessionstorage解决vue项⽬刷新后页⾯空⽩数据
丢失
第⼀部分
SessionStorage
⾸先查看sessionStorage的地⽅在控制台的 Application > Storage > Session Storage这⾥：
根据sessionstorage的特性，做⼀下各个⽅法的封装：
const ls = window.sessionStorage;
export
default {
getItem(key) {
try {
return JSON.Item(key));
} catch (err) {
return null;
}
},
setItem(key, val) {
ls.setItem(key, JSON.stringify(val));
},
sessionstorage和localstorageclear() {
ls.clear();
},
keys(index) {
return ls.key(index);
},
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.Item('test3'));
* 记得键名要加引号
三、sessionStorage.key（）⽅法
console.log(ls.keys(0));
console.log(ls.keys(2));
console.log(ls.keys(3));
控制台打印如下：
四、removeItem
* 键名记得加引号.
可以看到，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) {
// 条件成⽴：页⾯刷新的情况
window.location.href = '.../index.html?TeamID=' + newTeamID;
}
还有值得注意的是：
作⽤：刷新没有清除session的数据，如果条件成⽴的话，是需要重定向页⾯，让页⾯重新按照之前的步骤再⾛⼀边流程的，这时应该清除或者重置⼀下，不然页⾯⼀进来数据还存在，这⾥条件就会成⽴，会变成死循环，展⽰上就是页⾯⼀直跳转⼀直刷新。
直接清除join这样条件就不成⽴了且还⽅便操作。
⽽在判断的下边，调⽤ajax获取数据，并把响应结果中的关键信息(本案例中的newTeamID)⼀并寄托给sessionStorage：
$(state.ownSet.dataUrl + 'JoinInActive')
.then((response) = > {
if (response && response.data && sult === 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的数据，这时应该清除或者重置⼀下，不然是死循环，直接清除这样⽅便操作。
window.location.href = '.../index.html?TeamID=' + newTeamID;
}
}
这样解决了刷新后页⾯空⽩的问题，重定向重新请求数据
但是如果为了解决部分数据丢失的问题，也可以直接将数据实现存在sessionstorage内，然后判断刷新的话直接提取数据即可。不⽤再重定向重新请求数据这么⿇烦了
个⼈学习理解和总结，很多不⾜还请指正~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。