浏览器刷新页面/关闭页面时，实现js+ajax保存数据

窗口：卸载前事件 `beforeunload`

当窗口、文档及其资源即将卸载时，将触发 beforeunload 事件。此时，文档仍然可见，并且事件仍可取消。

此事件使网页能够触发确认对话框，询问用户是否确实要离开页面。如果用户确认，浏览器将导航到新页面，否则将取消导航。

//浏览器刷新和退出提示保存
window.onbeforeunload = function (e) {
    //returnd.state_stop = 5;
    //setreturnd("state_stop");
    e = e || window.event;
    if (e) {
        e.returnValue = '关闭提示';
    }
    return '关闭提示';
};

刷新提示弹窗：

浏览器离开提示弹窗：

参考文献：

https://blog.csdn.net/weixin_37806077/article/details/118580963?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-118580963-blog-105727148.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-118580963-blog-105727148.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=4

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

窗口：卸载后事件 onunload

onunload 事件在用户退出页面时发生。发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)

window.unload: 文档被完全卸载后触发

业务需求：用户界面观看视频，正常关闭窗口保存了当前观看时长数据，在浏览器意外关闭也需要保存视频当前观看时长，支持下次继续观看。

尝试后遇到的问题：

在onunload事件中使用ajax提交没有实现浏览器关闭操作数据库的功能

原因：

由于ajax默认是异步调用，这样就有一个问题：document的内容是先被销毁，还是先被传输到后端？如果是后者则符合项目需求，而如果是前者就会出现问题。
【解决方案】
将刷新和关闭页面时调用的方法函数中的ajax改为同步方式。

例子：

//页面关闭时调用保存数据
window.onunload = function () {
    quit_record_log("");//页面关闭做一些事情
};

function quit_record_log(sremark) { 
    //做一些事情
     $.ajax({
        async:false,//表示使用同步方式传输数据
        type:"POST",
        dataType:"json",
        data:{projectId:projectId,projectLists:arrProjectNodes},
        url:'Project/Project/modifyProject',
        success:function (data) {
            if (data.errno == 0) {
                $.cookie('projectlist_modify_flag', 0);//修改的内容已经保存，将该cookie置为0
            } else {
                console.log('there are some errors in project.js:storeChange ajax' + data.errno + ': ' + data.msg);
            }
        },
        error:function (er) {
            console.log('some error in project.js:storeChange ajax');
        }
    });
}