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

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

  • 相关阅读:
    MF研究:TinyCLR运行时原理
    不到600美元,即可获取一套MF Porting kit 3.0
    SideShow Gadget开发[1]
    我眼中的WinHEC大会台前幕后
    Visual C++ 2008入门经典 第四章数组 字符串(二) 简单
    PHP的常用函数 简单
    Visual C++ 2008入门经典 第五章程序结构(二) 简单
    用PHP将Unicode 转化为UTF8 简单
    sql GROUP_CONCAT(... SEPARATOR) 简单
    Visual C++ 2008入门经典 第四章数组 字符串(练习题) 简单
  • 原文地址:https://www.cnblogs.com/padding1015/p/9272809.html
Copyright © 2020-2023  润新知