首先这个需求是客户提出来的,
SpringMVC框架+vue,前后端一体开发,
用户打开网站登录进入我们系统主页,比如叫 http://127.0.0.1:8080/test/main,
需求如下:
1、用户每次第一次进入系统主页时,需要弹出一个提示信息,如果打开多个页签访问系统主页则除了第一个其余都不需要弹出提示
2、任何刷新操作都不需要弹出提示
3、如果用户第一次访问系统主页,弹出提示信息后,关闭重新打开后需要再次弹出提示
总结下就是浏览器每次第一次页签访问系统主页时需要弹出信息,其余不弹出
可能描述的比较乱,整体需求就是这样
下面是我想到的几个方案
在前端解决这个问题,因为系统集成了客户的统一认证平台是基于cookie的,前端解决的话只要考虑在单一浏览器情况下即可
1、使用localStorage,每次打开新网页时,记录下来(jquery中可以区分是打开页面访问还是刷新网页),这样可以记录打开了几个网页,然后监听
页面的关闭事件,每次关闭一个页面就把localStorage中页签数量减1,这样每次只要是页签数量为空时弹出一次提示即可。
遇到的问题:jquery或vue中无法准确的区分刷新和关闭动作,网上方法不少,但是试验了下没有一个是准确的
2、使用localStorage和sessionStorage,思路同1类似,就是监听sessionStorage的操作,然后和localStorage中的数量进行比对
遇到的问题:监听sessionStorage时无法获取某个key的试试数量,
3、模拟心跳机制,页面使用定时器不断刷新在localStorage中记录当前时间,然后根据每次打开主页的时间计算时间差,如果大于一个值,比如说3秒,则说明需要弹出提示
如果小于说明当前网页已经存在在浏览器中,则无需提示
遇到的问题:这个时间差不好定义,容易受网络环境等影响,比如多次访问系统主页时,浏览器加载慢了,就容易再次弹出提示,但是能满足大部分正常使用的场景
目前采用的是第三种方法,基本能满足需求,