浏览器刷新页面/关闭页面时，使用jquery+ajax保存数据的方法

最近做个人项目的时候，有一个需求：用户在页面进行各种编辑操作，但是却不必显示的保存修改，下次打开页面时依然可以看到修改后的内容。
看到这个需求第一反应就是，前端无感知，后端自动保存修改。具体怎么做呢？我的思路是：
1、在前端有修改时，写一个jquery函数（命名为：storeChange）——通过ajax将修改的内容传输到后端，由后端进行操作，比如保存数据库等。下次访问时，从数据库读取数据。
2、为了防止用户在刷新/关闭页面不丢失数据，因此需要通过jquery在这两个事件的时候调用storeChange函数。

第一个版本代码如下：

//页面关闭时调用$(window).unload(function(){    storeChange();});//页面刷新时调用$(window).on('beforeunload', function(event) {    storeChange();});//前端页面内容修改触发function haveModified(){    //做一些事情    storeChange();} function storeChange(){    //做一些事情    $.ajax({        type:"POST",        dataType:"json",        data:{projectId:projectId,projectLists:arrProjectNodes},        url:'Project/Project/modifyProject',        success:function (data) {            if (data.errno == 0) {                //do something             } 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');        }    });}

但是经检验这个版本有诸多问题：
第一、也是最严重的就是在刷新和关闭页面的时候，经常丢失数据（chrome）甚至部分浏览器完全不起作用（遨游-极速模式，兼容模式未试，这里不是黑遨游浏览器，本人是遨游浏览器的忠实用户，从初中用到现在，十多年了，个人感觉还是非常好用的）；
第二、如果操作非常频繁，会频繁调用后端接口，浪费资源、加大后端压力。

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

针对第二个问题：
【原因】
每一个修改（会点击一些按钮等进行新增、删除、编辑等）意味着监听修改的函数都会被调用。
【解决方案（前端）】
设置定时器，默认每过10秒调用一次storeChange函数来异步请求后端接口，这样可以减少请求次数，而且对于覆盖型（后面的修改会将前面的修改覆盖掉，实际上只保存后面的修改即可）的编辑，效果最好。
【解决方案（后端）】
这里就不具体讨论后端的解决方案了，大体思路就是缓存/消息队列等。本文只看前端解决方案。
【具体实现】
上述前端的解决方案并不完整，单纯使用定时器不能满足我们的需求，因为多次修改（10秒内）会产生多个定时器，因此需要设置一个cookie来记录是否被修改，如果被修改，清除上一次的定时器，重新计时。（提醒，使用cookie需要引入jquery对应的文件）

针对以上两个问题，修改后的代码如下：

//页面关闭时调用$(window).unload(function(){    storeChangeRealTime();});//页面刷新时调用$(window).on('beforeunload', function(event) {    storeChangeRealTime();});//前端页面内容修改触发var timerId = null;//记录定时器名称function haveModified(){    //做一些事情    $.cookie('projectlist_modify_flag', 1);//重新设置cookie，1表示：有修改    //定时器    clearTimeout(timerId);//清除之前的定时器（为了重新计时，否则会有多个定时器同时进行，传递多次数据）    timerId = setTimeout(storeChangeDelay, 10000);//设置定时器} function storeChangeDelay(){    //做一些事情    $.ajax({        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');        }    });}function storeChangeRealTime(){    //做一些事情    $.ajax({        async:false,//这是与storeChangeDelay不同的地方，表示使用同步方式传输数据        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');        }    });}

代码是精简过的，只是提供个解决这类问题的思路。

PS：当然，这种方法还是有弊端的，比如在刷新页面时，由于使用的是ajax同步方式，因此数据量过大或连接慢的话，可能会造成卡顿、甚至假死。如有更好方法请告知，将不胜感激。

水平有限，欢迎指正~
如需转发，请注明出处，3q~

参考：
http://www.iteye.com/problems/63413
http://blog.csdn.net/andy1219111/article/details/6914942