Typecho主题数据备份与恢复

原创内容 2,014
原创内容 2,014

为何写这个

  • 由于typecho模板设置数据会在换模板的时候被清空,想那些每次配置数据的人自己都觉得很烦。
  • 所以自己写了一个非插件的处理方法,可以适合任何typecho的主题,超级兼容。
  • 几个月前看见了QQ爹的 typecho模板设置数据备份与恢复 但是觉得不错,但是自己调试发现太不兼容了,于是现在自己写一个JavaScript的备份方式。

写了一个和QQ爹完全不一样的,他是用php实现,把备份放在数据库,而我是用JavaScript,因为我喜欢。
注意,我存数据的方式是本地储存,不是在数据库存存 用的函数localStorage HTML 5 Web 存储。

JavaScript

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

独立功能

有点主题更新会新增一些选项等等,按照QQ爹的方法会造成数据出错,而下面这个JavaScript写的就不会,只恢复上传保存的内容。

使用方法

需要找到自己主题下的functions.phpthemeConfig($form) 函数里添加如下的JavaScript
你应该知道怎么添加吧,注意格式哦

再次之前还要引入

<script type="text/javascript" src="./js/jquery.js"></script>

然后在引入,主要一定要严格按照顺序来。

function backData() {
    var newLocal= localStorage.backupData;
    if (newLocal!= "" && newLocal!= undefined) {
        var jsonData = JSON.parse(newLocal);
        var data = jsonData;
        for(var i in data){
            switch (data[i].type) {
                case "text":
                    $('#'+document.getElementsByName(data[i].name)[0].id).val(data[i].value);
                    break;
                case "textarea":
                    $('#'+document.getElementsByName(data[i].name)[0].id).val(data[i].val);
                    break;
                case "checkbox":
                    switch (data[i].checked) {
                        case 'true':
                            document.getElementById(data[i].id).checked = true;
                            break;
                        case 'false':
                            document.getElementById(data[i].id).checked = false;
                            break;
                    }
                    break;

                case "radio":
                    switch (data[i].checked) {
                        case 'true':
                            $('#'+data[i].id).prop("checked","checked");
                            break;
                        case 'false':
                            $('#'+data[i].id).removeAttr("checked");
                    }
                    break;
            }
        }
    }
}
function backupData() {
    var json = [];
    var inputs = $("input");
    var textareas = $("textarea");
    for (i = 0, len = inputs.length; i < len; i++) {
        var j = {};
        var input = inputs[i];
        j.name = input.name;
        j.type = input.type;
        j.id = input.id;
        switch (input.type){
            case "text":
                j.value = input.value;
                break;

            case "radio":
                j.checked = ''+input.checked+'';
                break;

            case "checkbox":
                j.checked = ''+input.checked+'';
                break;
            default:
        }
        json.push(j);
    }
    for (i = 0, len = textareas.length; i < len; i++) {
        var j = {};
        var textarea = textareas[i];
        j.name = textarea.name;
        j.type = 'textarea';
        j.id = textarea.id;
        j.val = $('#'+textarea.id).val();

        json.push(j);
    }
    var dataUp = JSON.stringify(json);
    localStorage.backupData = dataUp;
}
jQuery(function(){
    $(".typecho-option-submit").append("<li><button type=\"button\" class=\"btn primary\" onclick=\"backupData()\">备份</button></li><li><button type=\"button\" class=\"btn primary\" onclick=\"backData()\">恢复</button></li>");
});

但是有些主题有很长啦啦的配置,每次修改后还要滑到底保存,这样用position: fixed 强行固定在右侧,既方便有美观。

<style>
        .typecho-option-submit{
            position: fixed !important;
            bottom: 10px !important;
            right: 30px !important;
        }
        .typecho-option-submit li{
            display: inline;
            margin-right: 5px;
        }
    </style>

最后

如果你觉得很实用,就留个评论点个赞呗!
不过既然发了这篇文章,就说明已经搞定了。

  • copyright
    著作权归作者所有
  • person
  • play_arrow
    2,014 Views
  • create
  • autorenew
    最后修改:2018 年 10 月 02 日
  • local_offer
    原创内容无标签
copyright info_outline
  1. 其实想说一下你这个方法很好用,我把它加到我的主题后台中去了,来表示一下感谢!
    需要注明一下:因为Local Storage是本地存储,所以当你换了电脑,或者换了浏览器后,是读取不到备份的数据的,简单说就是你用A对象来备份的,也得使用A对象来恢复。
    有点解铃还须系铃人的意思。

    1. @小宇

      谢谢你的支持,不好意思回复晚了,博主正在进行二轮复习高考奋战 icon_razz.png

  2. 额,这个评论时间貌似缺少判断,一到2019年,所有18年的评论都是1年前了。我还以为这篇发出来有那么久了呢,结果一看是18年10月份的。【待续!!!提示评论不得多于200字符~~~】

  3. 其实我的那个文章里少写了点代码,所以才不好使的,前一阵经人提醒才发现 icon_lol.png

    1. @jrotty

      哈哈,当时我用你的备份代码时候,刚开始是时候可以,但是随着主题更新有些配置就不不行了,不过还是挺好的。 icon_razz.png

      1. @权那他

        其实我挺渣的,最初根本没想到能写出了,但是令人意外的是,两天就有思路了 icon_lol.png 造轮子真开心 icon_surprised.png

选择表情

*