前后端分离模式下,很多时候需要用到window.sessionStorage对象

例如用到vuex的项目,刷新页面后state中的数据全部初始化,那么就要再次发送请求

或者用户所在界面有vue-router跳转后的参数,那么刷新页面后参数就不见了,请求无参数,恰好服务器端未考虑该情况,那么就会导致一系列问题。

sessionStorage并不支持存储对象,一个个的键名来取又太麻烦,有更简单巧妙的办法——

将对象转为json串,再存入sessionStorage,取出时再转为js对象。

实现该思路,并封装为模块,用到就import,非常方便,代码如下:

function setSession(key,value){
    if(typeof value == "object"){//如果要存储对象,则先转为json串
        value = window.JSON.stringify(value);
    }
    sessionStorage.setItem(key, value);
}
function getSession(key){
    let value = sessionStorage.getItem(key);//字符串或json串
    let json = window.JSON.parse(value);//json串转为js对象

    if(typeof json == "object" && json){//利用了一点,当符合json格式,串会成功转为js对象,否则为null
        return json;
    }
    return value;
}
function clearSession(){
    sessionStorage.clear();
}
function hasKey(key){//session中是否存在指定key
    if(getSession(key) == "")
        return false;
    return true;
}

export default{
    setSession,
    getSession,
    clearSession,
    hasKey
}

 

Logo

前往低代码交流专区

更多推荐