onload、onpageshow、onpagehide、onbeforeunload、onunload的谣言纠正及特点介绍

谣言一、chrome不支持unload、onbeforeunload

              为什么说不支持呢？因为你使用alert，confirm，promot用来测试是否可用了！在unload和onbeforeunload方法执行的时候alert，confirm，promot这三个方法已经被注销了，所以无法执行。

              

       //错误
    window.addEventListener('beforeunload', function() {
                    alert(1)
            })

 

谣言二、在使用以上方法不能通过addevertlisener的方式使用

              因为通过add的方法添加方法的时候要去掉on，否则浏览器不识别。

             

       //错误
      window.addEventListener('onbeforeunload', function() {
                if(localStorage.getItem('hahah')) {
                    localStorage.setItem('hahah', '11')
                    return
                }
                localStorage.setItem('hahah', '3')
            })

 

 

执行顺序,通过查看本地的localstorage就可以明白了，😁

           //执行顺序  onpagethide到onbeforeunload到unload
            window.onpagehide = function(){
                localStorage.setItem('hahah','1')
            }
            window.onbeforeunload = function(){
                localStorage.setItem('hahah','2')
            }
            window.onunload = function(){
                localStorage.setItem('hahah','3')
            }

触发方式

            //刷新，跳转，关闭都会触发
            window.onpagehide = function(){
                if(localStorage.getItem('hahah')){
                    localStorage.setItem('hahah','11')
                    return
                }
                localStorage.setItem('hahah','3')
            }

区别

      为了说明bfcache行为提供了pagehide和pageshow(若页面在bfcahe中，再次打开页面不会触发load)。这两个事件的event中存在persisted属性，在pageshow中若页面从bfcache中加载，那么persisted为true。在pagehide中若页面卸载后会被保存到bfcache中那么persisted为true。

注意

       指定了onunload事件处理程序的页面会自动排除在bfcache之外，即使事件处理程序为空。