后台发布文章时自动保存草稿功能的实现

“正在系统后台编辑文章，顺手看了下群里的视频，关视频的时候不小心连网页一起关闭了，写了大半的文章说没就没了?”，相信很多人都遇到过这种场景，辛辛苦苦码了半天的字，结果因为自己一瞬间的操作失误，或者断电等外界原因，数据被清空了，只能重新点开编辑器再老老实实的码一遍。

前阵子还和同事说到这个自动保存草稿的事，当时还说，这种情况好多年没遇到过了，结果说完没几天，今天就遇到了，看来说话真的不能说太满，以后说话要小心一些。

其实很多软件都有类似的自动保存功能，比如wps等等，这个功能在我们的cms中也是有的，但是因为年年为他人做嫁衣裳，自己用的后台倒没有完全升级，好了言归正传，今天我们谈谈在网站管理系统的后端文章发布页，增加自动保存功能的实现思路和方法，理论上这个方法适合任何CMS（目前已知的开源程序里，貌似好像都没有这个功能）。

找到系统后端的文章发布页模板文件，所有的代码只需要加在这一个页面上即可。自动保存草稿的实现，主要分为两个步骤，保存草稿和恢复草稿。

一、自动保存草稿

这里我们要对HTML页面中的整个FORM表单内的数据进行保存，因为数据都是动态的，所以要设置定时器。另外，当表单内没有数据的时候，我们是不需要保存的，除了浪费资源，主要是当一打开发布页时，如果保存空的FORM表单，会覆盖掉之前保存的数据。

所以，归纳一下：1、判断有标题或者有内容时，再对form数据进行保存。2、每隔一段时间久保存一次，这里我们一般设置30秒。

form表单的数据，我们可以使用js的序列化来获取，数据存储在本地的时候我们使用js的localStorge方法来存储。到这里，基本上自动保存草稿的思路就清楚了，以下，是我们的实现代码示例：

/**
 * 文章发布自动保存草稿功能
 */
// 定时保存草稿
let saveDraft = function () {
        let formData = $('form').serializeArray();
        formData.push({name: 'content', value: editor.getData()});
        let saveFlag = true; // 默认保存
        formData.forEach(function (item, index) {
            // 标题或内容为空时不保存
            if (item.name === 'title' || item.name === 'content') {
                if (item.value === '' || item.value.length === 0) {
                    saveFlag = false;
                }
            }
        })
        if (saveFlag) localStorage.setItem('draft', JSON.stringify(formData));
    };

// 自动保存草稿
setInterval(saveDraft, 10000);

这里需要稍微注意的是，一般我们的后台文章编辑的部分都是使用一些集成插件，如Ckeditor、tinyEdit等等。编辑器的数据通过序列化serializeArray()方法是读不到的，因此，需要我们手动的将数据push到表单数据数组里，以上代码中的editor是我们创建的Ckeditor的对象名称，大家需要将editor更改为自己使用的编辑器对象的句柄。

二、读取并恢复草稿

当打开文章发布页面时，就应该进行一次草稿的检测，如果存在草稿的情况下，理论上应该自动恢复，但是为了用户体验考虑，建议大家多加一层判断，由用户决定是否要恢复草稿。如下：

对应的HTML代码及样式，大家自由发挥即可，非难点。实现草稿恢复的方法也很简单，即将数据读出，然后按照name值，进行逐一恢复即可。实现代码如下：

// 恢复草稿
$("#recoveryBtn").on('click',function (){
    draftData.forEach(function (item,index){
        if (item.name !== 'content'){
            if ($('input[name="'+item.name+'"]').length){
                $('input[name="'+item.name+'"]').val(item.value);
            }
        }else{
            editor.setData(item.value);
        }
    })
})

另外，还需要在文章发布成功之后，对草稿数据进行删除。如果我们的后台有多个模块的话，也可以考虑将这个方法提取出来，写成公共文件，方便在每个模块中进行自动调用。

这个自动保存草稿的功能大家都可以自行补充到自己使用的网站管理系统（CMS）中，以便获得更佳的用户体验，整合方便，也确实基本是每个CMS都应该必备的功能，一般情况下用不到，但是在真丢失数据的时候就显得非常重要了，妈妈再也不用担心我写了一半的文章丢失了。