最新公告
  • 欢迎您光临笨羊博客,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • OneNav一为主题魔改教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能

    上一篇《WP导航主题WebStack Pro魔改优化教程(五):点赞后自动加入到首页“我的导航”》说道,收藏功能的完善, 想了想保存在本地,清纯了浏览记录、换了电脑就全部丢了, 为了简单的解决这个问题。 现在加入一个网址导出\导入功能、 可以把保存在本地缓存中的网址导出成json文件下载, 并且支持再次导入。

    JSON文件保存格式:

    [{"id":1600586260344,"name":"美女小视频","url":"https://www.05001.cn/tools/mmvod/"}]

    效果:

    增加“添加自定义网址”这一块的功能, 如下图所示:

    OneNav一为主题魔改教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能------一梦导航

    导入:选择本地json格式文件, 自动上传并导入到“我的导航”。

    导出:本包“我的导航”中的网址, 下载到本地。

     

    修改方法:

    第一步:

    找到并打开tools-customize.php文件,在templates目录下。

    第二步:

    在该文件中添加两个按钮,和一个file input 框。

    <button type="button" class="btn mr-3" id="my_data_in">导入</button>
    <button type="button" class="btn mr-3" id="my_data_out">导出</button>
    <input type="file" id="my_data_file" name="file" style="display: none">

    完整代码如下图所示:

    OneNav一为主题魔改教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能------一梦导航

    customize文件修改完毕。

     

    第三步:打开app.js, 增加导入、导出的javascript事件。

    完整代码如下:

    //导入网址
    $("#my_data_out").click(function () {
    var cookies = getItem();
    debugger;
    var json = JSON.stringify(cookies);
    download("back-up-" + $.now() + ".json", json);
    });
    /**
    * 下載文本为文件
    * @param filename 文件名
    * @param text 内容
    */
    function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
    }

    // 我的数据导入 点击触发文件选择
    $("#my_data_in").click(function () {
    $("#my_data_file").click();
    });

    // 选择文件后读取文件内容
    $("#my_data_file").change(function () {
    var selectedFile = document.getElementById('my_data_file').files[0];
    //var name = selectedFile.name;//读取选中文件的文件名
    //var size = selectedFile.size;//读取选中文件的大小
    //console.log("文件名:"+name+" 大小:"+size);

    var reader = new FileReader();//这是核心,读取操作就是由它完成.
    reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
    reader.onload = function () {
    //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
    //console.log(this.result);

    // json 格式校验
    var mydata;
    try {
    mydata = JSON.parse(this.result);
    } catch (e) {
    alert("数据解析异常");
    return;
    }
    if (typeof mydata != 'object') {
    alert("数据格式错误");
    return;
    }

    if (confirm("当前数据将被覆盖!是否继续导入?")) {
    debugger;
    localStorage.removeItem('myLinks');

    if (mydata.length) {
    for (var i = 0; i < mydata.length; i++) {
    addSiteList({
    id: +new Date,
    name: mydata[i].name,
    url: mydata[i].url
    });
    }
    }
    $(".btn-close-fm").click()
    }
    }
    });

     

    保存, 一个不与数据库打交道的纯本地导入导出功能开发完毕。 可以愉快的玩耍了!

    如何调试?

    使用webkit内核浏览器, 按F12打开开发者工具,切换到application选项卡, 选择左侧菜单Application==>Clear storage==>点击Clear site data就能清空localStorage, 然后刷新,重新点赞试试效果。 

    张昊翔博客原创文章,作者:,如若转载,请注明出处:
    1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2、分享目的仅供大家学习和交流,请不要用于商业用途!
    3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    4、如有链接无法下载、失效或广告,请联系管理员处理!
    5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    笨羊博客 » OneNav一为主题魔改教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    笨羊博客
    一个关注网站建设、网站模板、搜索引擎、小程序的媒体博客

    发表评论