当离开页面时对未保存内容保存（window.onunload与window.onbeforeunload）

离开页面或关闭浏览器时，这两个方法可以被执行。

1、onunload事件：

当用户关闭一个页面时触发 onunload 事件。

　　1.关闭浏览器窗口

        2.通过地址栏或收藏夹前往其他页面的时候

        3.点击返回，前进，刷新，主页其中一个的时候　　

        4.点击一个前往其他页面的url连接的时候

2、onbeforeunload事件：
事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

       1.关闭浏览器窗口

        2.通过地址栏或收藏夹前往其他页面的时候

        3.点击返回，前进，刷新，主页其中一个的时候　　

        4.点击一个前往其他页面的url连接的时候

2、两者区别：

onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。onbeforeunload也是在页面刷新或关闭时调用，onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的，而 onbeforeunload 可以做到。

4.兼容性测试：

      1.onunload事件

 

 

	关闭页面	跳转页面	关闭浏览器	刷新页面
谷歌	支持	支持	支持	支持
火狐	不支持	不支持	不支持	不支持
safari	不支持	支持	不支持	支持
opera	支持	支持	支持	支持

 

   2.onbeforeunload事件

 

	关闭页面	跳转页面	关闭浏览器	刷新页面
谷歌	支持	支持	支持	支持
火狐	不支持	不支持	不支持	不支持
safari	支持	支持	支持	支持
opera	支持	支持	支持	支持

 

                 IE浏览器不支持onbeforeunload事件，会继续查找兼容方法

 

3.用法：

放在<script>脚本里面：

 window.onbeforeunload = unbeforeloadPage;

  function unbeforeloadPage() {
      localStorage.input = document.getElementById('input').value;
      alert("unbeforeload event detected!");
      $.ajax({
         url: '/test',
         type: 'POST',
         data:{value: document.getElementById('input').value},
         async : false,
         success:function(){},
         error:function(){}
      })
       return 'content is not save';
  }

      async : false 要加上，否则ajax不执行。

 

 

 2.

$(window).bind('beforeunload', function(){
     ....
     return '提示框上的文本'

}