在App hybrid多webView窗口中实现 sessionStorage

需求背景

业务中需要根据定位获取周边的位置点，定位功能包括自动获取定位和手动切换定位，产品希望在 App 关闭之前都使用手动切换的定位。总结就是需要把用户手动切换过的定位信息存储起来

技术背景

• App webView
• H5

*App 中为了实现滑动返回上一页的翻页效果，每次路由跳转都是打开一个新的 webview，就像一叠扑克牌
hybrid开发中会打开多个webView 页面，页面A设置数据，页面B中要得知数据，如果使用redux状态管理器、或浏览器sessionStorage在当前webView tab窗口有效，但关闭或打开新的窗口即销毁，在新的webView窗口如何获取数据 *

问题描述

这样就导致以下问题：

• store 不再是真正的全局 store，只是当前页面的 store

• 跨页面通信需要借助 App 的广播来实现（例如填写地址场景）

• 页面需要借助 App 的在页面再次显示时更新数据（例如购物车场景）

• sessionStorage 不可用

解决思路

• 通过 App UA 中的 sid 结合 localStorage 来模拟 sessionStorage，App UA： （window.navigator.userAgent）

Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 app_name/gaia app_ac/7c1d8e0a-a463-4428-b270-37410df888ae app_version/4.18.0 app_system_version/14.4 app_client_id/974CDCF679DD49959A2B908B55AFF47E app_sid/039C2702-C9E1-44DC-9C1D-F859B0CD75CB

代码实现

/**
 * @description 获取sid （在app关闭重新打开才会改变）
 */
export const getHybridSid = () => {
  return navigator.userAgent.match(/app_sid\/([0-9|a-z|\-|]+)/i)?.[1];
};

/**
 * 判断是否重新打开了app相对上次的存SessionStorage值
 */
const isReopenForSessionStorage = () => {
  const app_sid = getHybridSid();
  const app_sid_last = window.localStorage.getItem('hybridSidForSessionStorage');
  return !(app_sid_last && app_sid === app_sid_last);
};

/**
 * @description 兼容APP和H5的sessionStorage 获取
 * @param key 获取参数的key值
 */
export const getSessionStorage = (key) => {
  if (isHybridEnv()) {
    if (isReopenForSessionStorage()) {
      localStorage.setItem(key, null);
      return null;
    } else {
      return localStorage.getItem(key);
    }
  } else {
    return sessionStorage.getItem(key);
  }
};

/**
 * @description 兼容APP和H5的sessionStorage 设置
 * @param key 设置参数的key值
 * @param value 设置的值
 */
export const setSessionStorage = (key, value) => {
  if (isHybridEnv()) {
    localStorage.setItem('hybridSidForSessionStorage', getHybridSid());
    return localStorage.setItem(key, value);
  } else {
    return sessionStorage.setItem(key, value);
  }
};