使用浏览器脚本给WordPress后台文章做实时容灾备份

前言

基于js的技术，我们可以做到对网站编辑器的输入记录进行实时保存，备份记录的缓存里面防止未保存而导致的悲剧。很多人都遇到过这样的情况，就是当你写好了一大篇文章，写的非常精彩的时候，但是不小心的情况下手动关闭了浏览器，或者没有保存或者浏览器发生了意外崩溃了，或者说电脑系统突然卡死了，而导致文章的丢失，这个时候让你再重写一遍，那么你的感觉一定是日了狗了。而云落今天要解决的就是这个问题，因为同样我昨天晚上也遇到过这个问题。

说明

在讨论这个问题之前，我们先说一下WordPress自带的保存功能。WordPress其实是自带自动保存功能的，但是他的这个自动保存是保存到远程服务器的数据库里面，而且也并不是实时保存，还是定时保存，另外在保存的时候，它会发生一定的网络延迟，而导致编辑器有些卡顿，会有一定程度的卡死等情况，这个时候你会发现你的编辑体验是非常的差，有时候都有一种想放弃写文字的冲动。另外WordPress的自动保存会占用数据库的空间，所以的话为了减轻数据库的空间，这里很多人都是禁用自动保存这个功能的。

解决

在技术上的流程就是将文本框输入内容内容实时保存到浏览器的缓存里面，当浏览器崩溃或者关闭的时候，重新打开这个界面的时候，点击恢复按钮，从缓存里面直接提取内容插入的文本框里面，为了解决缓存体积的问题，加入了自动清除缓存的功能。当在点击保存草稿，发布文章，删除文章的时候，会自动清除缓存，因为这个时候缓存已经没有必要了。

脚本使用

在脚本安装之后打开，后台的文章新建或者是编辑页面，就会看到在媒体按钮旁边会多了一个一键恢复按钮，在文本框里面输入文字，然后关闭网页，然后再重新打开，点击恢复按钮，即可恢复之前输入的内容。

特别注意

需要注意的一点就是，在关闭网页后需要备份的时候，请一定要首先执行备份恢复操作，不要点击文本框或者输入文字，不然新输入的文字会覆盖掉之前的备份内容，另外再点击恢复之后，脚本会自动清除缓存。所以说恢复文章的话只有一次机会，没有二次恢复的机会。

脚本代码

(function() {
    'use strict';

    /* 由于WordPress网站后台自带jQuery，所以这里不再重新载入 */
    $(document).ready(function() {
        function getpostid(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r !== null) {
                return unescape(r[2]);
            }
            return null;
        }
        var postid = getpostid('post');
        var TOKEN_KEY;
        if (postid) {
            TOKEN_KEY = postid;
        } else {
            TOKEN_KEY = 'newpost';
        }
        //设置缓存
        var setpostca =function (){
            window.localStorage.setItem(TOKEN_KEY, $("#content").val());
        }
        //删除缓存
        var delpostca =function (){
            window.localStorage.removeItem(TOKEN_KEY);
        }
        //输入内容更新缓存
        $("#content").bind("input", setpostca );
        //鼠标聚焦更新缓存
        $("#content").focus( setpostca );
        //保存草稿删除缓存
        $('#save-post').on("click", delpostca );
        //删除文章删除缓存
        $('#delete-action').on("click", delpostca );
        //发布文章删除缓存
        $('#publish').on("click", delpostca );
        //获取恢复
        jQuery(document).on("click", "#get_localstorage", function() {
            var c = window.localStorage.getItem(TOKEN_KEY);
            $("#content").val(c);
            delpostca;
        });
        //增加按钮
        $("#wp-content-media-buttons").append('  <a class="button button-primary" id="get_localstorage"  href="javascript:void(0);">&#8634 一键恢复</a>');
    });
})();

相关链接