PHP+Ajax 自动保存功能 实现代码

今天需要增加一个功能，用户在写文章的时候，需要隔几秒或几分钟就需要把数据存入到Mysql数据库中，做一次自动保存，自动备份。

由于我用的是simditor富文本编辑器，以前也做过“Simditor自动保存”功能，但是，那个自动保存功能远远不能满足，因此，只好再用原生的PHP + JavaScript + Ajax 代码再重新写一下。

实现原理：

1、文章自动保存，肯定要先得到文章的ID，自动保存哪一篇文章内容？

2、文章自动保存，不可能让用户点击一次或刷新一下页面再保存对吧？必须用Ajax异步去自动实现。用户是不需要做任何操作的就可以完成自动保存功能。

3、文章自动保存，多少时间自动保存一次？这个时间应该是可以更改的，需要用上JS的setInterval()方法。

4、文章自动保存，只有当内容变化了，我们再执行自动保存数据，存入数据库对吧！如果内容无变化，就不应该存入数据库。如果不这样设计，如果一个用户打开了文章编辑页面后，写了几个文字后，用户离开了，页面没有关闭，光标还是闪烁状态，总不能一直ajax展示请求存数据库吧！因此我需要用上cookie来记录文章内容的长度以及比较。

前端代码

1、前端html代码

我这是为了要快速测试，因此我设置自动保存时间是3000毫秒，也就是3秒保存一次，我自己的业务后期会改为2分钟自动保存一次。

关于这个post_id也就是文章ID如何得到？有两种方案：

第一种，自动草稿功能，以我这为例子，只要用户在发表文章页面时，只要标题有输入内容后，就会ajax异步执行自动草稿功能，得到文章id，再写入post_id。而且只执行一次。

第二种，自动保存功能，用下面这个代码再做一些的修改，第一次自动保存的时候得到文章id，再写入post_id，虽然说有一些缺点，具体看自己的情况。

index.php

 <div class="layui-form-item layui-form-text">
     <label class="layui-form-label">正文内容</label>
       <div class="layui-input-block">
       <textarea name="contents" id="editor" ></textarea>

      </div>
 </div>
           //自动保存功能函数，默认每两分钟保存一次
           function AutoSave() {
               if(document.getElementById('post_id').value > 0){ //这是得到文章的ID，保存哪一篇文章？
                   if(getCookie('EditorLength') == editor.getValue().length){
                       console.log('不执行自动保存');
                   }else{
                       //console.log(getCookie('EditorLength')+'11111');
                       //console.log(editor.getValue().length+'22222');
                       document.cookie="EditorLength = " + editor.getValue().length;
                       console.log('开始自动保存，这里放 前端ajax请求代码 ，我把这里的代码放在下面的');
                   }
               }
           }

           //获取 cookie 值的函数
           function getCookie(cname)
           {
               var name = cname + "=";
               var ca = document.cookie.split(';');
               for(var i=0; i<ca.length; i++)
               {
                   var c = ca[i].trim();
                   if (c.indexOf(name)==0) return c.substring(name.length,c.length);
               }
               return false;
           }

           //开始执行自动保存功能，默认每两分钟保存一次
           setInterval(AutoSave, 3000);
       </script>

2、前端JavaScript ajax请求代码：

我用的是POST异步请求，如果想用GET请求，请自行更改。

            <script type="text/javascript">
           var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {

                    console.log(xmlhttp.responseText);
                }
            };
            var data = "title="+document.getElementById('title').value +"&alias="+document.getElementById('alias').value+"&category_id="+document.getElementById('category_id').value+"&mode=title"+"&token=<?php echo $get_token; ?>";
            console.log(data);
            xmlhttp.open("POST","<?php echo $HOMEURL.$ADMIN_ADDRESS;?>/ajax.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(data);
</script>

后端代码

也就是俗话说的：后端ajax响应代码：

ajax.php

<?php
echo "写逻辑，判断，然后存入数据库，再给一个返回结果，例如：成功，失败或者不返回。";

php代码如何写我就不用多说了吧？最核心的部份已经解决了，剩下来的靠你们自己了。

注意：

还有很重要的一点，当文章内容发表成功后，最好是清理一下cookie['EditorLength']的值。