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

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

JSON文件保存格式：

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

效果：

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

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

完整代码如下图所示：

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 魔改起航！每日一篇修改教程， 记录修改点滴！