返回到上一页时恢复之前数据，最关键的是和从其他路由跳转过来进行区分，以及数据的存取。

我的项目中使用的是react+redux，状态管理中每个界面的数据都有单独的reducer来进行维护，所以存的时候只需要保存state中当前界面的值、取数据时覆盖这部分的state即可。使用时数据的存取需要根据实际项目来进行操作。

区分是否是其他路由跳转，采用的方法是跳转前给当前路由增加hash值：back=recover。

1.跳转前

在界面跳转到其他路由之前，如果需要保存数据，需要置换当前路由，在hash值中增加back=recover。

例如当前界面的路由是/pageA，跳转到/pageB之前，执行setUrlParams()；这样跳转到/pageB的路由，实际上是/pageA?back=recover，在/pageB执行返回上一页时，也同样返回到了/pageA?back=recover。

const projectName = "你的项目名"
const pageName = PAGE_A;
// 跳转
toPageB = () = {
    setUrlParams();
    // 保存数据
    setStoreRecoveryData({/*数据，里面可以有多个对象*/}, pageName);
    setTimeout(() => {
        this.props.router.push("/pageB")
    }, 100)
}

setUrlParams = () => {
    let hash = location.hash;
    let back = needRecoveryState() ? '' :
        (hash.indexOf('?') > -1 ? '&back=recover' : '?back=recover');

    window.history.replaceState(null, '', hash + back);
}

setStoreRecoveryData = (data, page='') => {
    setSessionStorage(projectName + page, Object.assign(data));
}

2.进入当前路由

进入/pageA时，需要判断是否需要恢复数据


// 恢复数据
dataRecovery = () => {
    const recoveryState = getStoreRecoveryData(pageName);
	
    // 删除session
    clearStoreRecoveryData(pageName);
    if (needRecoveryState() && recoveryState) {
        // 这里恢复需要的数据
        ...
        
        return;
    }

    // 如果不需要回复数据，走下面的逻辑
    ...
}

needRecoveryState = (page='') => {
    return getHashParamByName('back') === `recover${page}`;
}
getStoreRecoveryData = (page='') => {
    return getSessionStorage(projectName + page);
}
clearStoreRecoveryData = (page='') => {
    removeSessionStorage(projectName + page);
}

utils

getSessionStorage = (key) => {
    if (isSessionStorageSupport) {
        let tmp = window.sessionStorage.getItem(key);
        if (tmp !== null) {
            try {
                return JSON.parse(tmp);
            } catch (error) {
                return tmp;
            }
        }
    }
};
setSessionStorage = (key, obj) => {
    if (isSessionStorageSupport) {
        return window.sessionStorage.setItem(key, JSON.stringify(obj));
    }
};
removeSessionStorage = (key) => {
    if (isSessionStorageSupport) {
        return window.sessionStorage.removeItem(key);
    }
};
/**
 * 获取hash后的queryString参数
 * @param name
 * @returns {*}
 */
getHashParamByName = (name) => {
    const hash = window.location.hash;
    if (!hash) return null;
    const search = hash.substr(hash.indexOf('?') + 1, hash.length - 1);
    if (!search) return null;
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = search.match(reg);
    if (r != null) return decodeURIComponent(r[2]);
    return null;
}

返回上一页时恢复数据

1.跳转前

2.进入当前路由

utils