在JavaScript中检查页面是否被重新加载或刷新

需求需要在软件首次打开页面是告知用户一个修改默认密码的提示，而且仅仅只是提示一次

思路通过在浏览器里面存储用户记录访问记录字段而达到效果

后面在资料查找的过程中发现更有意思的浏览器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