需求需要在软件首次打开页面是告知用户一个修改默认密码的提示,而且仅仅只是提示一次
思路通过在浏览器里面存储用户记录访问记录字段而达到效果
后面在资料查找的过程中发现更有意思的浏览器api实现检测页面是否刷新的办法
方案1 利用浏览器的存储
使用sessionStorage
sessionStorage会话值一直保留到页面关闭为止,所以只有当页面在网站的新标签中重新加载时,它才会起作用。 你也可以用同样的方法保持重载计数。
// 第一步是检查sessionStorage的一些预定义的值,如果它存在,就提醒用户。
// 第二步是将sessionStorage设置为某个值(比如说true)
if (sessionStorage.getItem('reloaded') != null) {
// 存在session 说明已经访问过
console.log('page was reloaded');
} else {
console.log('page was not reloaded');
}
// 同时,创建一个session
sessionStorage.setItem('reloaded', 'yes'); // could be anything
使用 cookie , localStoraget同理
当第一次访问网页时存储一个cookie。 在刷新时检查你的cookie是否存在,如果存在,就发出警告。
function checkFirstVisit() {
if(document.cookie.indexOf('isFirst')==-1) {
// 没有cookie 说明第一次访问,创建一个
document.cookie = 'isFirst=1';
}
else {
// 已经存在cookie,说明浏览器已经刷新
alert('You refreshed!');
}
}
方案二 浏览器api window.performance.navigation
, PerformanceNavigationTiming.type
由于window.performance.navigation
属性在Navigation Timing Level 2规范中被弃用。 所以使用PerformanceNavigationTiming
接口代替。
PerformanceNavigationTiming.type是一项实验性技术.。
在生产中使用之前,请仔细检查浏览器兼容性表。
兼容性处理
function navigationType(){
var result;
var p;
if (window.performance.navigation) {
result=window.performance.navigation;
if (result==255){result=4} // 4 is my invention!
}
if (window.performance.getEntriesByType("navigation")){
p=window.performance.getEntriesByType("navigation")[0].type;
if (p=='navigate'){result=0}
if (p=='reload'){result=1}
if (p=='back_forward'){result=2}
if (p=='prerender'){result=3} //3 is my invention!
}
return result;
}
结果定义。
0: 点击一个链接,在浏览器地址栏中输入URL,提交表单,点击书签,通过脚本操作进行初始化
1: 点击重新加载按钮或使用location.reload()
2: 使用浏览器历史记录(前进和后退)
3: 预渲染的链接。比如<link rel="prerender" href="//example.com/next-page.html">
4: 其他情况。
最后
关于判断用户是否是第一次进入页面,其实还可以结合后台接口进行记录,这样即使用户清空浏览器缓存也能知道用户是首次登录
参考文献: Check if page gets reloaded or refreshed in JavaScript