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

最新推荐文章于 2025-10-09 09:53:59 发布

原创最新推荐文章于 2025-10-09 09:53:59 发布 · 1.3w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #unload #刷新 #关闭

前端同时被 3 个专栏收录

2 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文介绍了一种前端自动保存用户编辑内容的方法，通过定时器和Cookie技术，在用户进行编辑操作时，每隔一段时间自动将修改后的数据异步发送到后端保存，并在页面关闭或刷新时采用同步方式确保数据完整保留。

最近做个人项目的时候，有一个需求：用户在页面进行各种编辑操作，但是却不必显示的保存修改，下次打开页面时依然可以看到修改后的内容。
看到这个需求第一反应就是，前端无感知，后端自动保存修改。具体怎么做呢？我的思路是：
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');
        }
    });
}