需求：仅存在以下两种情况展示弹窗

• 
  
• 登录页进入首页
  
• 用户保存了登录状态后通过地址栏或书签直接进入首页
  

本文用两种方案实现：

• 
  
• 使用Document.referrer获取上个页面的 URI
  
• 使用sessionStorage存储弹窗展示数据
  

每个方案我都会讲讲解决思路和存在问题，记录一下自己的idea。

方案一：使用Document.referrer获取上个页面的 URI

解决思路

这是我想到的第一个解决方案。

1. 
   
2. 在进入首页界面时，调用Document.referrer获取跳转到首页的起点页面 URI
   
3. 将获取的 URI 与登录页的 URL 作比较
   
4. 如一致，则展示弹窗；反之则不展示
   

实现伪代码如下：

const previousUrl = document.referrer;  // 获取上个页面的 URI
const loginUrl = '登录页 URL';
// 比较登录页 URL 与 previousUrl 是否相等 或 获得的 URI 是否为空，不相等则不展示。
const showDialog = loginUrl === previousUrl || previousUrl === '';

为什么还有一个previousUrl === ''判断呢？它判断的其实是第二种情况（直接进入首页），如果用户是通过地址栏或书签直接进入首页的话，Document.referrer返回的是空字符串。

存在问题

讲到这，这个方案是不是已经解决我们在文章开头提出的需求了呢？从代码、逻辑以及实践是可以的，但是，我提出以下几个场景，大家判断一下弹窗是否会出现。

场景1 用户从登录页进入首页后（此时弹窗已成功展示并关闭），刷新首页，此时弹窗会再次出现吗？

场景2 登录页和首页的域名不一样，用户从登录页进入首页后会出现弹窗吗？

答案揭晓，前者会出现弹窗，后者则不会出现弹窗。

场景1解析

用户从登录页进入首页，在此前提下我们在首页调用Document.referrer得到登录页的 URI ；随后用户做刷新操作，再次在调用Document.referrer，获得新的 URI 和之前登录页 URI 是一致的，所以弹窗还会再次出现。

为了大家方便理解，我以GitHub为例：

我从 GitHub 登录页进入其主页，然后在控制台获取上个页面的 URI 。此时，我在主页点击刷新，再次在控制台调用Document.referrer，获得的 URI 与第一次获取的相同。

场景2解析

场景2是Document.referrer返回的 URI 与登录页 URL 不同导致的。其实不仅仅是域名不同会导致这个问题，文件路径或者文件名不同都有可能导致返回的 URI 与登录页 URL 不同。

小伙伴们有没有发现，我多次提及Document.referrer返回的字符串是 URI 。URI（统一资源标识符）与 URL（统一资源定位符）是有区别的，尤其，URI 并不是固定的，是相对的。（想了解更多“关于 URI 与 URL 区别”的小伙伴点击这里）

先解释为什么登录页域名和首页域名不同，获得的 URI 就会和登录页不一样呢？举个例子，

这是我登录页的 URL：

我登录进入首页后，在控制台输出Document.referrer：

发现没有，朋友们，获得的 URI 与登录页本身的 URL 不同，所以弹窗不展现。为什么会不同呢？再次贴出我另外一篇文章，点击了解更多哦！

方案二：使用sessionStorage存储弹窗展示数据

众所周知，当用户打开一个窗口，会有一个sessionStorage对象；当窗口关闭时，会清除对应的sessionStorage。这一特性刚好符合我们的需求。

解决思路

• 
  
• 用户每次进入首页都会从sessionStorage获取 key 为弹窗ID的值
  
• 判断值是否存在：
  
  • 
    
  • 如果值存在的话说明该弹窗已经展现过，不必再展示，直接跳出
    
  • 如果值为undefined则说明该弹窗在此窗口中没有展现过，则把 key 为弹窗ID的数据保存到sessionStorage，然后展示弹窗
    
  
  
  

伪代码如下：

const sessionItemKey = '弹窗ID';
if (sessionStorage.getItem(sessionItemKey)) return;

sessionStorage.setItem(sessionItemKey, 'Y');
this.dialogVisible = true;

存在问题

方案二似乎解决了方案一存在的刷新问题，也不会有获取 URI 与登录页 URL 不同的潜在问题，是个完美的解决方案！

不过，小伙伴们要注意一个场景：用户在一个窗口内多次登入和登出首页，弹窗会不会展示呢？ 答案是不会展示。因为登入和登出操作都是在同一个会话当中发生的，多次登录进入首页，sessionStorage的数据都不会清除。

我们理一遍逻辑：

• 
  
• 用户打开新的登录页面窗口，登录成功进入首页
  
• 首页跑了一次以上伪代码中值不存在的情况，在sessionStorage中保存了数据
  
• 用户退出登录，再次进入登录页面（在同个会话中）
  
• 用户登录成功后进入首页，首页跑了一次以上伪代码中值存在的情况
  

所以！sessionStorage的特性也会导致问题。不同的方案适用于不同的场景，就看大家怎么选择啦！

结束语

本次分享又到尾声啦！欢迎有疑惑或不同见解的小伙伴们在评论区留言哦~