WP导航主题WebStack Pro魔改优化教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能。

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

JSON文件保存格式:

[{"id":1600586260344,"name":"美女小视频","url":"https://tool.8kmm.com/tools/mmvod/"}]

效果:

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

WP导航主题WebStack Pro魔改优化教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能。

导入:选择本地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">

完整代码如下图所示:

WP导航主题WebStack Pro魔改优化教程(六):接第五篇,继续完善本地网址功能,增加本地网址的导入导出备份功能。

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, 然后刷新,重新点赞试试效果。 

 

 

Webstack Pro 魔改起航!每日一篇修改教程, 记录修改点滴!

 

 

暂无评论

暂无评论...