H5 localstorage如何进行单页面一个多元化的首屏加载

1。在移动端我们做单页面应的时候，会推出一些广告来进行首屏加载，如果本地游览器有缓存的时候我们首屏加载不用出现，减速少用户看到页面的第一时间的速度
2。有时候利用首屏加载我们会推出一些新产品广告我们又如何不会因为缓存的原因而导致首屏加载页面出不来
3.当用户手动清空缓存的时候，也会再次出现首屏加载页

我发现了一个很好的办法

利用三个参数
1.声明一个唯一id
2.声明一个活动key
3.再给一个value值

/** 新增&&修改本地缓存
 *  @param {string} id 唯一id
 *  @param {string} key 标示
 *  @param {string} value 新增&修改的值
 */
export function savaToLocal(id, key, value) {
  let seller = window.localStorage.__seller__;
// 如果此时保存的这个全局localStorage变量为undefined时
  if (!seller) {
// 把seller设为一个空对象
    seller = {};
// 把对象里面的唯一个标准，可也以认为是否个活动也设为一个空对象
    seller[id] = {};
  } else {
// 此时不为underfined
// 如果防止seller在localstorage全局中被占用则,再把存在的seller转为真正的对象
    seller = JSON.parse(seller);
// 再进行判断，如果此时的活动id是一个undefined的时候
    if (!seller[id]) {
// 把活动里面id设为一个对象
      seller[id] = {};
    }
  }
// 然后把整个localstroage进行对象传参编译
  seller[id][key] = value;
// 再把全局localstorage里的__seller__转成字符串放入
  window.localStorage.__seller__ = JSON.stringify(seller);
}
/** 查询本地缓存
 *  @param {string} id 唯一id
 *  @param {string} key 标示
 *  @param {string} def 如果查询不到显示的值
 */
export function loadFromlLocal(id, key, def) {
  let seller = window.localStorage.__seller__;
//如果此时保存的这个全局变量为undefined时
  if (!seller) {
//返回false
    return def;
  }
//如果这时候有seller的时候,因为此时localstorage存的是字符串，我们要把它转为真正的json
// 再查询里面的id编号，这个编号也可以把他看作是否个公司
  seller = JSON.parse(seller)[id];
//如果里面是一个空对象
  if (!seller) {
    //还是返回一个false
    return def;
  }
    //如果ret里面有这个唯一标示为undfined的时候，可能首屏加载页的活动页已经换了的话我们 返回一个false
  let ret = seller[key];
  return ret || def;
}

执行的代码

注意我用的是vue的router进行路由插入

if (!loadFromlLocal('gank', 'wecome', false)) {
//如果loadFromlLocal值行返回false的话，我们把加载页也显示出来
  router.push('/wecome');
}else{
//否则加载首页
  router.push('/welfare');
}

当首屏加载出来以后我们要在首屏加载页面进行代码加入savaToLocal('gank', 'wecome', true);保存这到Localstorage

1当线上首屏加载页活动改变时候我们永远不要动第一个参数，因为这个唯一id代表是你们公司
2.第二个参数代表当前活动，如果有活动改变请把参数名命名为活动的名字，就算localstorage里保存着你公司的唯一id，但活动是不匹配的，所有还是会加首屏加载活动显示出来，
3.第三个也是固定值，表示反回的参数来确定到底要不要进行首屏加载页