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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java 成神之路

基于ReentrantLock发生死锁的解决方案

3326
来自专栏Golang语言社区

【Go 语言社区】Go文件操作函数

文件操作 golang的文件操作时在os包中的。 所以用的时候要import os包 包含以下的这些函数 func Create(n...

3036
来自专栏数据之美

shell 学习笔记(16)

转载请注明出处: https://cloud.tencent.com/developer/user/1177713/activities 注:以前的1-15连载...

36110
来自专栏JetpropelledSnake

Django学习笔记之Django中间件

1505
来自专栏PHP在线

YII运行原理

应用执行流程: 浏览器向服务器发送 Http Request | 控制器(protected/controllers) | |—> Action | 创建模型 ...

3366
来自专栏蓝天

Shell 条件判断汇总

-b file            若文件存在且是一个块特殊文件,则为真 -c file            若文件存在且是一个字符特殊文件,则为真 -d ...

872
来自专栏Jacklin攻城狮

iOS,面试必看,最全梳理

目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了。今年,找过工作人可能会更深刻地体会到今年的就业形势不容乐观,加之,培训机构一火车地向用人单位输送...

2342
来自专栏有趣的django

Flask快速入门 flask快速入门

2200
来自专栏从零开始学自动化测试

Selenium2+python自动化60-异常后截图(screenshot)

前言 在执行用例过程中由于是无人值守的,用例运行报错的时候,我们希望能对当前屏幕截图,留下证据。 在写用例的时候,最后一步是断言,可以把截图的动作放在断言这里,...

4055
来自专栏飞扬的花生

微信开发扫一扫功能并且屏蔽分享菜单

1.引入JS   <script language="javascript" type="text/javascript" src="http://res.wx...

27311

扫码关注云+社区

领取腾讯云代金券